iOS 购物车动画

立即下载用AI写一个

发布时间：2017-08-14

27人 | 浏览：5492次 | 收藏 |

技术：C + OC + CAAnimation

运行环境：macOS + Xcode

概述

本文描述了iOS 购物车动画实现的过程，应用场景是购买商品时的购物车动画效果。

详细

先看看动画效果：
![效果图][gif_2016-11-21]

项目结构：

![项目结构](/contentImages/image/20170814/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][img_2017-02-25]

> * `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"];
```
####五、其他
[模拟贝塞尔曲线][bezier]

---

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

[Demo]:https://github.com/JoanLeeo/ShoppingCartAnimation
[iOS 一分钟搞定加入购物车的交互动画]:http://www.jianshu.com/p/bd650158d44c

[gif_2016-11-21]:http://upload-images.jianshu.io/upload_images/610137-ac971dc56bad0ddf.gif?imageMogr2/auto-orient/strip
[img_2017-02-25]:http://upload-images.jianshu.io/upload_images/610137-4aabdd001af0bc6d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240

[bezier]:http://myst729.github.io/bezier-curve/

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

iOS 购物车动画

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子