关闭

CAKeyframeAnimation(关键帧动画)

标签: 开发动画
121人阅读 评论(0) 收藏 举报
分类:

上一篇介绍了CAAnimation的基本属性,这篇介绍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属性

calculationMode keys 说明
kCAAnimationLinear calculationMode的默认值,表示当关键帧为座标点的时候,关键帧之间直接直线相连进行插值计算;
kCAAnimationDiscrete 离散的,就是不进行插值计算,所有关键帧直接逐个进行显示;
kCAAnimationPaced 使得动画均匀进行,而不是按keyTimes设置的或者按关键帧平分时间,此时keyTimes和timingFunctions无效;
kCAAnimationCubic 对关键帧为座标点的关键帧进行圆滑曲线相连后插值计算,对于曲线的形状还可以通过tensionValues,continuityValues,biasValues来进行调整自定义,这里的数学原理是Kochanek–Bartels spline,这里的主要目的是使得运行的轨迹变得圆滑;
kCAAnimationCubicPaced 看这个名字就知道和kCAAnimationCubic有一定联系,其实就是在kCAAnimationCubic的基础上使得动画运行变得均匀,就是系统时间内运动的距离相同,此时keyTimes以及timingFunctions也是无效的.
感谢一下博客:

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/

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:286次
    • 积分:31
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档