CAAnimation和CALayer使用Tips1

需要记住的关键字

• CAMediaTimingFunction 动画缓冲， 可以自定义的动画缓冲效果
• CAKeyframeAnimation 关键帧动画，注重过程
• CAAnimationGroup 动画组，别忘了统一设置duration等参数
• CABaseAnimation 基础动画，跟老板一样，注重开始和结尾
• CAShapeLayer 基础图层， 画线条的高手，自带动画
• CAReplicatorLayer 重复动画，快速创建多个一样的图层
• CAGradientLayer 渐变图层， 只要有渐变时就要想到她
• mask 遮罩属性， 能完全灵活掌握，你就牛逼到天上了
• UIBezierPath 贝塞尔曲线， 画path就靠它了

现在IOS的系统动画都自动加入spring的功能

CAKeyFrameAnimation中必须理解的属性

values、keyTimes、timingFunctions、timingFunction。
CAKeyframeAnimation: 关键帧动画

• values: 指定关键帧数组，动画会在指定的duration里执行每一帧。
• keyTimes: 对应每一个关键帧对应的时间点，数量应和values数量一致，当为空时每一关键帧执行的时间平分。
• timingFunctions，这个属性可以设置每一关键帧的执行的速度，描述了关键帧从一个值变成另一个值的过度步调（运动函数），可以想象成时间曲线，数量是values数量-1。

例如，我们想要画出一个抛篮球的运动轨迹，我们可以手绘出这个运动的轨迹，如下图，并将这个篮球的运动速率描述成这几段： 加速 -- 减速 -- 加速 -- 再加速。

自然语言：
1.球可以制定成一张图片
2.运动轨迹，可以使用贝塞尔曲线绘画出对应的path
3.添加path到CAKeyFrameAnimation或者CABaseAnimation实例中，实现球沿着path运动

篮球轨迹_匀速.gif

然而我们是生活在地球上的，这个篮球的运动方式是非自然，因为他是匀速运动的。正常抛出一个球，她的速度应该是要经历 加速 -- 减速 -- 加速 -- 再加速，这样的一个过程。所以我们需要使用到timingFunction这个属性，帮我们解决问题。

篮球轨迹_非线性.gif

timingFunction，这实际上是苹果用来制作三次贝塞尔曲线的函数的，而制作三次贝塞尔曲线就需要知道的四点：起点、终点、两个控制点。我们需要熟练掌握控制点才能很好的控制运动函数。

如果对控制点不够敏感，就如同掌控不了G点一样，在这里向艹榴的知己们发一个福利，这里有一个帮你模拟G点的位置，以后快慢由自己控制，包教包会。

G点模拟器.png

如果万恶的产品狗，非要将速率这样控制： 加速 -- 匀速 -- 减速 -- 加速 -- 再加速，同时要加一个回弹效果。

110.gif

自然语言：
1.篮球指定成一张图片
2.使用贝塞尔曲线绘画出所有的运动轨迹，并生成关键帧数组values
3.使用CAMediaTimingFunction类，对应values生成每一个关键帧的timingFunction，生成timingFunctions
4.添加values到CAKeyFrameAnimation实例的values属性中
5.添加timingFunctions到CAKeyFrameAnimation实例的timingFunctions属性中

篮球滚动轨迹.gif

就在这个时候我们移动端老大过来了，咳咳了两声，说篮球的姿势太古板，能不能让他换个姿势，要让男的看了能硬气来，女的看了能湿气来，那好吧，那我就让他换个姿势。

6.创建一个旋转的动画A
7.将动画A和之前的动画加到一个动画组实例中，并将动画组添加到篮球ImageView的图层上，就实现了如下的效果。

旋转的篮球.gif

CAReplicatorLayer和使用for循环创建layer的区别

我们都知道CAReplicatorLayer是CALayer的子类，类似一个容器，创建CAReplicatorLayer实例C，可以使用addSubLayer方法添加一个指定的CALayer实例A，并可以指定instanceCount（实例A的数量）、instanceDelay（实例A的添加时间）、instanceTransform（实例A的transform）等。这样我们就实现在实例C上的重复添加实例A，并通过一定的规则，形成不同的展示方式。

使用CAReplicatorLayer.gif

而CAReplicatorLayer是存在一定的缺陷，当我们要求每一个实例A添加不同的动画，比如需要设置不一样的动画的beginTime、duration、timingFunctions等属性时，使用CAReplicatorLayer则显得束手无策。实例A添加的只能是同一个动画，所以这时候我们就需要使用for循环来创建实例A，将不同的beginTime、duration、timingFunctions等属性分别添加到动画中，并将动画分别赋值给实例A。这样就可以实现如下的效果：

使用for循环创建.gif

总结一点：其实两个各有各的优势，使用for循环的方式可以让程序变的更加灵活多变，而是CAReplicatorLayer类更加抽象点。

CAMediaTimingFunction

使用系统自带的几个模式，实现动画的缓冲。
CAMediaTimingFunction生成一个对象，并赋值给CAAnimation的timingFunction属性，这样动画在执行的时候，就可以实现相应的缓冲。

CALayer的mask属性

给一个ALayer的mask属性赋值BLayer，可以看成在A上覆盖了B，而能显示出来的是两者的重叠部分，和B的相关属性（color、transform）。

UIBezierPath

- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise

理解startAngle与endAngle，弧从哪算起始和终止:

        1.5PI

1.0PI               0PI

        0.5PI

CAKeyFrameAnimation、CABaseAnimation区别

CABaseAnimation只能设置动画的起始值和结束值，针对一些平移（直线运动）、缩放、淡入淡出等简单动画进行设置，而
CAKeyFrameAnimation关键帧动画更加注重动画执行的过程，可以设置一组关键帧，比如执行曲线平移、起始和终止位置的衔接问题。

CABaseAnimation和CAKeyFrameAnimation都可以设置在动画的timingFunction属性，但前者只能设置fromValue、endValue、byValue这三个值，并只能设置一次timingFunctions，而后者可以设置多个values，并可以设置每一个关键帧的时长和timingFunctions进行设置。