CAKeyframeAnimation(关键帧动画)

原创 2015年07月08日 21:34:42

上一篇介绍了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/

关键帧动画CAKeyframeAnimation,可以用它来控制图像的运动轨迹

之所以叫做关键帧动画是因为,这个类可以实现,某一属性按照一串的数值进行动画,就好像制作动画的时候一帧一帧的制作一样。一般使用的时候 首先通过 animationWithKeyPath 方法 创建一个C...
  • PZ0605
  • PZ0605
  • 2014年08月20日 14:13
  • 895

CAKeyframeAnimation 关键帧动画

之所以叫做关键帧动画是因为,这个类可以实现,某一属性按照一串的数值进行动画,就好像制作动画的时候一帧一帧的制作一样。 一般使用的时候  首先通过 animationWithKeyPath 方法 创建...

第三十八篇:CAKeyframeAnimation--+CAShapeLayer+UIBezierPath用法,关键帧动画

有个很关键的属性:rotationMode // 把rotationMode设置=kCAAnimationRotateAuto 根据曲线的切线自动旋转     keyframeAnimation.r...

CAKeyframeAnimation 关键帧动画的用法

一、原理 之所以叫做关键帧动画是因为,这个类可以实现,某一属性按照一串的数值进行动画,就好像制作动画的时候一帧一帧的制作一样。 一般使用的时候  首先通过 animationWithKeyPat...

CAKeyframeAnimation—关键帧动画

转载自:http://www.jianshu.com/p/b05986ded337 一、简介 关键帧动画,也是CAPropertyAnimation的子类 结构图.png...

关键帧动画CAKeyframeAnimation

转自:http://blog.csdn.net/huifeidexin_1/article/details/8504075   之所以叫做关键帧动画是因为,这个类可以实现,某一属性按照一串的数值进...

iOS之CAKeyframeAnimation关键帧动画详解

CABasicAnimation算是CAKeyFrameAnimation的 特殊情况,即不考虑中间变换过程,只考虑起始点与目标点就可以了。而CAKeyFrameAnimation则更复杂一些,允许我...

iOS核心动画-关键帧动画CAKeyframeAnimation

iOS开发UI篇—核心动画(关键帧动画) 一、简单介绍 是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(...

核心动画之关键帧

  • 2016年07月28日 16:20
  • 94KB
  • 下载

ch3 动画和关键帧

  • 2012年10月04日 11:00
  • 1.67MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CAKeyframeAnimation(关键帧动画)
举报原因:
原因补充:

(最多只允许输入30个字)