CAAnimation和CALayer使用Tips1

需要记住的关键字

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

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

CAKeyFrameAnimation中必须理解的属性

valueskeyTimestimingFunctionstimingFunction
CAKeyframeAnimation: 关键帧动画

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

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

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


CAAnimation和CALayer使用Tips1_第1张图片
篮球轨迹_匀速.gif

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

CAAnimation和CALayer使用Tips1_第2张图片
篮球轨迹_非线性.gif

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

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

CAAnimation和CALayer使用Tips1_第3张图片
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进行设置。

你可能感兴趣的:(CAAnimation和CALayer使用Tips1)