对于电商APP产品，购物车这块还是很多细节的，这不，我们的产品大大提出，需要用户点击商品时飞入购物车的动画特效。
动画.gif
这就是我的demo的动画效果，暂时并没有做UI美观处理，仅仅展示功能，如果觉得还可以，可以接着向下看喽。
1、先把动画效果自定义
这里路径和缩放效果及动画时间可以根据自己的需求进行更改，有需要直接拿走不谢！
.h文件：
// 商品动画进入购物车效果
#import <UIKit/UIKit.h>
@interface UIView (Animation)
- (void)animationStartPoint:(CGPoint)start endPoint:(CGPoint)end didStopAnimation:(void(^)(void)) event;
@end
.m文件：
#import "UIView+Animation.h"
#import <objc/message.h>
@interface UIView ()
@property (nonatomic, copy) void (^animStop)(void);
@end
@implementation UIView (Animation)
- (void)animationStartPoint:(CGPoint)start endPoint:(CGPoint)end didStopAnimation:(void (^)(void))event {
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:start];
[path addCurveToPoint:end controlPoint1:start controlPoint2:CGPointMake(start.x, start.y)];
// 路径
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation.path = path.CGPath;
animation.rotationMode = kCAAnimationRotateAuto;
// 缩放
CABasicAnimation *scAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scAnimation.fromValue = @1;
scAnimation.toValue = @0.2;
scAnimation.autoreverses = YES;
CAAnimationGroup *groups = [CAAnimationGroup animation];
groups.animations = @[animation,scAnimation];
groups.duration = 0.5; // 时间
groups.removedOnCompletion = NO;
groups.fillMode = kCAFillModeForwards;
groups.delegate = self;
[groups setValue:@"groupsAnimation" forKey:@"animationName"];
[self.layer addAnimation:groups forKey:nil];
self.animStop = event;
}
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
self.animStop();
}
- (void)setAnimStop:(void (^)(void))animStop {
objc_setAssociatedObject(self, @"animStop", animStop, OBJC_ASSOCIATION_COPY);
}
- (void (^)(void))animStop {
return objc_getAssociatedObject(self, @"animStop");
}
@end
2、在你所需要使用动画效果的控制器里操作
引入头文件#import "UIView+Animation.h"
找到点击当前的item的方法，我这里是collectionView，
#pragma mark collectionViewDelegate
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
// 1.获取数据模型
YYPGoodsModel *good = self.goods[indexPath.item];
self.listVC.model = good;
// 2.获取 item 创建当前imageView
UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
UIImageView *imageView = [[UIImageView alloc] init];
[imageView sd_setImageWithURL:[NSURL URLWithString:good.img] placeholderImage: [UIImage imageNamed:@"u58"]];
// 计算坐标系
CGFloat y = cell.y - self.collectView.contentOffset.y;
imageView.frame = cell.frame;
imageView.y = y;imageView.backgroundColor = [UIColor clearColor];
[self.view addSubview:imageView];
// 3.商品飞入购物车后移除当前imageView
[imageView animationStartPoint:imageView.center endPoint:self.cartBtn.center didStopAnimation:^{
[imageView removeFromSuperview];
}];
}
对于电商产品的购物车设计，一些其他细节你注意了吗？请参考这篇文章，本人真心觉得很不错
http://www.cocoachina.com/design/20160217/15302.html
