美文网首页
CAAnimation和CALayer使用Tips1

CAAnimation和CALayer使用Tips1

作者: 王大吉Rock | 来源:发表于2018-12-13 18:03 被阅读40次

    需要记住的关键字

    • 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运动


    篮球轨迹_匀速.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进行设置。

    相关文章

      网友评论

          本文标题:CAAnimation和CALayer使用Tips1

          本文链接:https://www.haomeiwen.com/subject/djnpnftx.html