第四章 关键帧动画

免责申明（必读！）：本博客提供的所有教程的翻译原稿均来自于互联网，仅供学习交流之用，切勿进行商业传播。同时，转载时不要移除本申明。如产生任何纠纷，均与本博客所有人、发表该翻译稿之人无任何关系。谢谢合作！ 著作权声明：本文由http://blog.csdn.net/mengtnt翻译，欢迎转载分享。请尊重作者劳动，转载时保留该声明和作者博客链接

   核心动画为你提供了一个完全控制动画的方法。这种控制是以关键帧动画（keyframe animation）形式存在的。关键帧动画是你能够，给动画的每个主要步骤分配你想要的值，剩下的就帮你填充。

   描述关键帧动画的这个术语是来自于电影工业。随着电影中的动画发展到计算机里，在关键帧之间填充成为创建平滑动画必不可少的部分，上述过程的这个概念就叫补间动画（tweening)。核心动画同样没有什么不同的。你在动画中指定了关键帧，那么核心动画就帮你处理补间动画的过程。它可以基于你在动画中指定的属性，计算出在每个关键帧之间还有什么需要做，然后就插入需要的值。它相当的方便，可以使动画的代码任务变的非常的简单。

这章中，我们将讨论如何从基础动画过度到关键帧动画中。它如此的简单，因此过度应该也是很顺利的。我们也介绍给你层的旋转，和如何通过画一些路径来给层增加内容。

随着时间改变值

   核心动画提供了一些列你可以做动画的属性。关键帧动画是一个可以随时改变这些属性的过程。你可以想象下，关键帧动画就是一组动画捆扎在一起，然后按顺序运行。

   对于核心动画来说，插值（和电影中的补间动画相似）利用每个关键帧之间的属性值，来计算出附近关键帧的开始值和结束值。换个角度考虑，你可以想象成一个棒球内场中的垒。每一个垒就是一个关键帧，跑手知道，当击球时，如果他想得到一分，他必须跑到第一个垒，然后第二个，第三个，最后到主垒（这个过程中，他不能被赶出去）。他不必担心每两个垒之间的步骤，但是他必须跑到这些垒的每一个。简单的说，关键帧中的动画就是按照顺序跑到每一个目的点（关键帧），直到所有的目的地都到达。

当然了，在棒球内场这种情况下，你的最后一帧的值应该和第一帧一样。

指定关键帧目的地的两个方法

当你想要使一个属性做动画时，要么你指定一序列的属性值，让动画按顺序到达这些序列值，或者你指定一个核心图形的路径：

一个系列值数组很容易被使用一些东西指定，例如背景颜色的改变值，边框或者边框的宽度，还有框架的大小，甚至CGImage(内容的图片)都能被作为关键路径。你通过指定一列CATransform3D对象给数组，来给旋转（transform）这个属性做动画。

使用核心图形路径，可以在屏幕上移动物体从一点到另一点。无论什么时候，只要CGPoint属于属性的类型，一个核心图像路径很可能就是正确的选择。你可以使用anchorPoint和position这个两个属性来使路径做动画。

按照优先级，一个路径会覆盖一组值。这就意味着如果你通过-setPath指定了一个路径，通过-setValues调用的任何值都将被忽略。列表4-1和4-2分别演示了怎么来使用核心图像路径和一组值。清单看起来相似，但是结果却完全不同。在清单4-1中的动画，会引起层按照抛物线的路径跳动。而清单4-2会引起层按照直角的锯齿跳动。

[plain]  view plain copy

1. - (CAAnimation*)pathAnimation;  
2. {  
3. CGMutablePathRef path = CGPathCreateMutable();  
4. CGPathMoveToPoint(path,NULL,50.0,120.0);  
5. CGPathAddCurveToPoint(path,275.0,150.0,120.0);  
6. CGPathAddCurveToPoint(path,250.0,350.0,450.0,255); color:inherit; line-height:18px"> CAKeyframeAnimation *  
7. animation = [CAKeyframeAnimation  
8. animationWithKeyPath:@”position”];  
9. [animation setPath:path];  
10. [animation setDuration:3.0];  
11. [animation setAutoreverses:YES];  
12. CFRelease(path);  
13. return animation;  
14. }  

  清单4-1 路径动画

copy

- (CAAnimation*)valuesAnimation;  
1. NSPoint pt0 = NSMakePoint(50.0, 120.0);  
2. NSPoint pt1 = NSMakePoint(50.0, 275.0);  
3. NSPoint pt2 = NSMakePoint(150.0, 275.0);  
4. NSPoint pt3 = NSMakePoint(150.0, 120.0);  
5. NSPoint pt4 = NSMakePoint(150.0,92); line-height:18px"> NSPoint pt5 = NSMakePoint(250.0,255); color:inherit; line-height:18px"> NSPoint pt6 = NSMakePoint(250.0,92); line-height:18px"> NSPoint pt7 = NSMakePoint(250.0,255); color:inherit; line-height:18px"> NSPoint pt8 = NSMakePoint(350.0,92); line-height:18px"> NSPoint pt9 = NSMakePoint(350.0,255); color:inherit; line-height:18px"> NSPoint pt10 = NSMakePoint(350.0,92); line-height:18px"> NSPoint pt11 = NSMakePoint(450.0,255); color:inherit; line-height:18px"> NSPoint pt12 = NSMakePoint(450.0,92); line-height:18px"> NSArray *values = [NSArrayarrayWithObjects:  
6. [NSValue valueWithPoint:pt0],  
7. [NSValue valueWithPoint:pt1],  
8. [NSValue valueWithPoint:pt2],92); line-height:18px"> [NSValue valueWithPoint:pt3],255); color:inherit; line-height:18px"> [NSValue valueWithPoint:pt4],92); line-height:18px"> [NSValue valueWithPoint:pt5],255); color:inherit; line-height:18px"> [NSValue valueWithPoint:pt6],92); line-height:18px"> [NSValue valueWithPoint:pt7],255); color:inherit; line-height:18px"> [NSValue valueWithPoint:pt8],92); line-height:18px"> [NSValue valueWithPoint:pt9],255); color:inherit; line-height:18px"> [NSValue valueWithPoint:pt10],92); line-height:18px"> [NSValue valueWithPoint:pt11],255); color:inherit; line-height:18px"> [NSValue valueWithPoint:pt12],92); line-height:18px"> nil];  
9. CAKeyframeAnimation  
10. *animation = [CAKeyframeAnimation  
11. [animation setValues:values];  
12. return animation;  
13. }