iOS 购物车动画

偏执的太偏执、 2022-05-30 01:38 184阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/11155.html][http_www.demodashi.com_demo_11155.html]

先看看动画效果：  
![效果图][strip]

项目结构：

![项目结构][aZrBxg0tYaY7jpb1eSU.jpg]

接下来开始具体实现过程：

--------------------

#### 一、先计算动画开始结束位置 ####

> 方法：`- (CGPoint)convertPoint:(CGPoint)point toView:(nullable UIView *)view;`
> 
> 用该方法计算动画view相对于window的位置

1） 计算动画开始位置`fromCenter`

CGPoint fromCenter =  [animationView convertPoint:CGPointMake(animationView.frame.size.width * 0.5f, animationView.frame.size.height * 0.5f) toView:keyWindow];

2）计算动画结束位置`endCenter`

CGPoint endCenter = [endView convertPoint:CGPointMake(endView.frame.size.width * 0.5f, endView.frame.size.height * 0.5f) toView:keyWindow];

#### 二、计算贝塞尔曲线（抛物线）的两个控制点 ####

> 用UIBezierPath 画出抛物线，需要找到两个控制点controlPoint1 和 controlPoint2

![图1][1]

>  *  `controlPoint1`是控制点1
>  *  `controlPoint2`是控制点2
>  *  `A`是`controlPoint1`和`controlPoint2`的中点
>  *  `controlPointC`是`fromCenter`和`B`的中点

1）先设置控制点距最高点（`fromCenter`或`endCenter`）的水平距离`controlPointEY`，本篇默认`controlPointEY = 100`，即***图1***中点`controlPointC`到点`A`的距离。

2）计算控制点相对于点`A`的距离`controlPointEX`，即`controlPoint1`到`A`距离或`controlPoint2`到`A`距离，本篇设置为`fromCenter.x`到`endCenter.x`的1/4，即`controlPointEX = (endCenter.x - fromCenter.x) * 0.25f;`

3）计算两个控制点位置

CGPoint controlPoint1 = CGPointMake(controlPointCX - controlPointEX, controlPointCY - controlPointEY);
    CGPoint controlPoint2 = CGPointMake(controlPointCX + controlPointEX, controlPointCY - controlPointEY);

\#\#\#\#三、复制动画的layer

> 复制cell上需要做动画的view，add到window上做动画

NSString *str = ((UIButton *)animationView).titleLabel.text;
    _animationLayer = [CATextLayer layer];
    _animationLayer.bounds = animationView.bounds;
    _animationLayer.position = fromCenter;
    _animationLayer.alignmentMode = kCAAlignmentCenter;//文字对齐方式
    _animationLayer.wrapped = YES;
    _animationLayer.contentsScale = [UIScreen mainScreen].scale;
    _animationLayer.string = str;
    _animationLayer.backgroundColor = [UIColor redColor].CGColor;
    [keyWindow.layer addSublayer:_animationLayer];

#### 四、动画组合 ####

> 整合所有动画，让view动起来

1）运动轨迹（抛物线）

UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:fromCenter];
    [path addCurveToPoint:endCenter controlPoint1:controlPoint1 controlPoint2:controlPoint2];
    CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    pathAnimation.path = path.CGPath;

2）旋转起来

CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    rotateAnimation.removedOnCompletion = YES;
    rotateAnimation.fromValue = [NSNumber numberWithFloat:0];
    rotateAnimation.toValue = [NSNumber numberWithFloat:10 * M_PI];
    rotateAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]

3）缩放动画

CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.removedOnCompletion = NO;
    scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
    scaleAnimation.toValue = [NSNumber numberWithFloat:0.2];

4）透明度动画

CABasicAnimation *alphaAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    alphaAnimation.removedOnCompletion = NO;
    alphaAnimation.fromValue = [NSNumber numberWithFloat:1.0];
    alphaAnimation.toValue = [NSNumber numberWithFloat:0.1];

5）动画组合

CAAnimationGroup *groups = [CAAnimationGroup animation];
    groups.animations = @[pathAnimation,rotateAnimation, scaleAnimation, alphaAnimation];
    groups.duration = kShoppingCartDuration;
    groups.removedOnCompletion=NO;
    groups.fillMode=kCAFillModeForwards;
    groups.delegate = self;
    [_animationLayer addAnimation:groups forKey:@"group"];

#### 五、其他 ####

[模拟贝塞尔曲线][Link 1]

--------------------

参考：[iOS 一分钟搞定加入购物车的交互动画][iOS]

iOS 购物车动画

> 代码地址如下：  
> [http://www.demodashi.com/demo/11155.html][http_www.demodashi.com_demo_11155.html]
> 
> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_11155.html]: http://www.demodashi.com/demo/11155.html
[strip]: /images/20220530/96e1bfcebc404a398dd8fa40c3dd916c.png
[aZrBxg0tYaY7jpb1eSU.jpg]: /images/20220530/c594c8d2e693442ab802c91da262b78f.png
[1]: /images/20220530/0414f78c9d2e4cd7a9f39ec5966c211f.png
[Link 1]: http://myst729.github.io/bezier-curve/
[iOS]: http://www.jianshu.com/p/bd650158d44c