iOS购物车动画实现
1.动画效果图
效果图
2.动画分析
购物车动画主要用了核心动画中的关键帧动画，即CAKeyframeAnimation, 购物车动画的path是一条贝塞尔曲线，所以我们的重点就是构建一条这样的贝塞尔曲线即可，系统为我们提供了2个path类，一个是封装好的UIBezierPath, 一个是C语言的CGMutablePathRef结构体。其实这两个类都可以实现，我们只需要使用其中的一种就可以了。
3.核心代码
其实每个cell上都有一个“加入购物车按钮”，当点击按钮，我们需要在自定义的cell里面进行坐标系转化，因为按钮相对于自己的cell，我们的最终效果就是，无论tableView的偏移量是多少，当点击加入购物车按钮，就从当前按钮的中心点出发到购物车终点进行动画。
所以在Cell.m里面，按钮触发事件里面代码如下：
坐标转化
这个里面用到convertPoint:toView：方法，可以这样理解：[A convertPoint:point toView:B], 表示point点相对于A坐标系的点转化到B坐标系上位置，方法返回的也是一个点。就好比我们相对于一个参照物的位置是point1,参考另外一个参照物的位置就是point2,参照物不一样，位置肯定也不一样。所以在进行动画的过程中，我们先把动画的起点和终点转化到同一个坐标系上，即控制器的view.
4.构造贝塞尔曲线
下面先了解下贝塞尔曲线
图片来源网络
这是一个二阶贝塞尔曲线，一个曲线大概有3部分组成：起点、终点、控点。上图中Po就是起点，P1是控点，P2是终点。当控点变化时，曲线也会跟着变化。
PS:控点就是起点和终点切线的交点。
购物车动画我们可以构成一个这样的贝塞尔曲线：
构造的贝塞尔曲线
如上图，P0是起点，P2是终点，P1就是P0和P2切线的交点，即控点。
/**
* 动画的终点
*/
CGPoint _endPoint = btn.center;
Cell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"];
[cell setShoppingCarButtonDidClickHandle:^(CGPoint centerPoint) {
//起点
CGPoint startPoint = [tableView convertPoint:centerPoint toView:self.view];
//控点
CGPoint controlPoint = CGPointMake(_endPoint.x, startPoint.y);
//创建一个layer
CALayer *layer = [CALayer layer];
layer.frame = CGRectMake(0, 0, 40, 40);
layer.position = centerPoint;
layer.backgroundColor = [UIColor redColor].CGColor;
layer.cornerRadius = layer.frame.size.width/2;
layer.masksToBounds = YES;
[self.view.layer addSublayer:layer];
//创建关键帧
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation.delegate = self;
//动画时间
animation.duration = 5;
//当动画完成，停留到结束位置
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
//当方法名字遇到create,new,copy,retain，都需要管理内存
CGMutablePathRef path = CGPathCreateMutable();
//设置起点
CGPathMoveToPoint(path, NULL, startPoint.x, startPoint.y);
CGPathAddQuadCurveToPoint(path, NULL, controlPoint.x, controlPoint.y, _endPoint.x, _endPoint.y);
//设置动画路径
animation.path = path;
//执行动画
[layer addAnimation:animation forKey:nil];
//释放路径
CGPathRelease(path);
}];
Demo的github地址： https://github.com/qindeli/--ShoppingCarAnimation
