iOS之商品飞入购物车动画效果

对于电商APP产品，购物车这块还是很多细节的，这不，我们的产品大大提出，需要用户点击商品时飞入购物车的动画特效。

动画.gif

这就是我的demo的动画效果，暂时并没有做UI美观处理，仅仅展示功能，如果觉得还可以，可以接着向下看喽。

1、先把动画效果自定义

这里路径和缩放效果及动画时间可以根据自己的需求进行更改，有需要直接拿走不谢！
.h文件：

//  商品动画进入购物车效果

#import 

@interface UIView (Animation)
- (void)animationStartPoint:(CGPoint)start endPoint:(CGPoint)end didStopAnimation:(void(^)(void)) event;
@end

.m文件：

#import "UIView+Animation.h"
#import 

@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