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

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

这就是我的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