美文网首页
CAKeyframeAnimation 关键帧动画

CAKeyframeAnimation 关键帧动画

作者: 羽裳有涯 | 来源:发表于2019-01-24 17:36 被阅读9次

    CAKeyframeAnimation(关键帧动画)

    关键帧动画就是在动画控制过程中开发者指定主要的动画状态,至于各个状态间动画如何进行则由系统自动运算补充(每两个关键帧之间系统形成的动画称为“补间动画”),这种动画的好处就是开发者不用逐个控制每个动画帧,而只要关心几个关键帧的状态即可。

    关键帧动画开发分为两种形式:
    一种是通过设置不同的属性值进行关键帧控制,
    另一种是通过绘制路径进行关键帧控制。
    后者优先级高于前者,如果设置了路径则属性值就不再起作用。

    看下面的代码,简单的用法:

    CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@“position”];
    //设置关键点
    NSValue *key1 = [NSValue valueWithCGPoint:_layer.position];
    NSValue *key2 = [NSValue valueWithCGPoint:CGPointMake(300, 220)];
    NSValue *key3 = [NSValue valueWithCGPoint:CGPointMake(100, 300)];
    NSValue *key4 = [NSValue valueWithCGPoint:CGPointMake(300, 400)];
    keyAnimation.duration = 5.0f;
    [self.layer addAnimation:keyAnimation forKey:@"key"];
    

    当然页可以换成路径:

    //2.设置路径
    //绘制贝塞尔曲线
    CGMutablePathRef path = CGPathCreateMutable();
    //移动到起始点
    CGPathMoveToPoint(path, NULL, _layer.position.x, _layer.position.y);
    //绘制二次贝塞尔曲线
    CGPathAddCurveToPoint(path, NULL, 160, 280, -30, 300, 55, 400);
    //设置path属性
    keyAnimation.path=path;
    //释放路径对象
    CGPathRelease(path);
    

    (1) values属性
    values属性指明整个动画过程中的关键帧点,例如上例中的key1-key2就是通过values指定的。需要注意的是,起点必须作为values的第一个值。

    (2)path属性
    作用与values属性一样,同样是用于指定整个动画所经过的路径的。需要注意的是,values与path是互斥的,当values与path同时指定时,path会覆盖values,即values属性将被忽略。

    (3)keyTimes
    keyTimes:各个关键帧的时间控制,如果你没有显式地对keyTimes进行设置,则系统会默认每条子路径的时间为:ti=duration/(5-1),即每条子路径的duration相等,都为duration的1\4。当然,我们也可以传个数组让物体快慢结合。前面使用values设置了四个关键帧,默认情况下每两帧之间的间隔为:8/(4-1)秒。如果想要控制动画从第一帧到第二针占用时间4秒,从第二帧到第三帧时间为2秒,而从第三帧到第四帧时间2秒的话,就可以通过keyTimes进行设置。keyTimes中存储的是时间占用比例点,此时可以设置keyTimes的值为0.0,0.5,0.75,1.0(当然必须转换为NSNumber,其中首尾必须分别是0和1),也就是说1到2帧运行到总时间的50%,2到3帧运行到总时间的75%,3到4帧运行到8秒结束。

    keyAnimation.keyTimes = @[@(0),@(0.3),@(0.8),@(1)];
    

    (3) calculationMode属性

    图片.png

    http://www.cnblogs.com/kenshincui/p/3972100.html#autoid-3-1-0

    http://www.cnblogs.com/wengzilin/p/4256468.html

    http://blog.jobbole.com/69111/

    相关文章

      网友评论

          本文标题:CAKeyframeAnimation 关键帧动画

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