转载

CAKeyFrameAnimation

KeyFrameAnimation来源于动画产业，最早做动画片的时候，会分为几个角色，牛点的人会根据剧情等因素把场景中的关键画面画出来，剩下的不那么牛的人则根据这些关键画面把一些过渡性的图片补足，假设一秒需要20张图片，关键图片可能有5张，剩下的15张则根据这5张的内容来补齐，这就是最早的key frame的来源。其实在视频编解码中也经常会碰到类似的属于，比如KeyFrame和I帧P帧这些名词，都是跟这些有关的。

在iOS中，如果你使用CAKeyFrameAnimation，则需要提供一些关键点，然后iOS在显示的过程中会根据这些信息自动补齐过渡性的内容。

我们可以用下面一个飞机飞行线路的例子来说明

- (void)drawSpaceCurve {     // Create a path     UIBezierPath *bezierPath = [[UIBezierPath alloc] init];     [bezierPath moveToPoint:CGPointMake(0, 150)];     [bezierPath addCurveToPoint:CGPointMake(300, 150)                   controlPoint1:CGPointMake(75, 0)                   controlPoint2:CGPointMake(225, 300)];      // Draw the path using CAShapeLayer     CAShapeLayer *pathLayer = [CAShapeLayer layer];     pathLayer.path = bezierPath.CGPath;     pathLayer.fillColor = [UIColor clearColor].CGColor;     pathLayer.strokeColor = [UIColor redColor].CGColor;     pathLayer.lineWidth = 3.0f;     [self.view.layer addSublayer:pathLayer];      // Add the ship     CALayer *shipLayer = [CALayer layer];     shipLayer.frame = CGRectMake(0, 0, 64, 64);     shipLayer.position = CGPointMake(0, 150);     shipLayer.contents = (__bridge id)[UIImage imageNamed:@"Ship"].CGImage;     [self.view.layer addSublayer:shipLayer];      // Create the keyframe animation     CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];     animation.keyPath = @"position";     animation.duration = 4.0f;     animation.path = bezierPath.CGPath;     [shipLayer addAnimation:animation forKey:nil]; }

CAKeyFrameAnimation

在代码运行中，我们确实看到了飞机的运行轨迹和我们定义的bezierPath一致，但有个问题，就是飞机的机头方向没有在运行过程中做调整，这便使动画看起来怪怪的，不过好在Apple已经预见到这个需求，所以在CAKeyFrameAnimation中提供了一个名为rotationMode的属性，当我们把这个属性设置为kCAAnimationRotateAuto时，飞机在运行过程中机头始终超前，实现了我们的需求。

animation.rotationMode = kCAAnimationRotateAuto;

另外在实际的动画应用中，我们经常会使用到多个动画效果一同展示的情况，这种情况我们可以通过CAAnimationGroup来实现，它的用法和单独设置一个动画的效果没有太大的区别，但当你把多种效果组合到一起，在展示的时候，就可以轻松完成多个效果的同时展示。

我们还是用上面的轨迹来演示，不过把飞机换成了一个色块，动画是使色块不但按照我们规定好的路径运动，并且在运动中进行颜色的变换。

- (void)testAnimationGroup {     UIBezierPath *bezierPath = [[UIBezierPath alloc] init];     [bezierPath moveToPoint:CGPointMake(0, 150)];     [bezierPath addCurveToPoint:CGPointMake(300, 150)                   controlPoint1:CGPointMake(75, 0)                   controlPoint2:CGPointMake(225, 300)];      CAShapeLayer *pathLayer = [CAShapeLayer layer];     pathLayer.path = bezierPath.CGPath;     pathLayer.fillColor = [UIColor clearColor].CGColor;     pathLayer.strokeColor = [UIColor redColor].CGColor;     pathLayer.lineWidth = 3.0f;     [self.view.layer addSublayer:pathLayer];      CALayer *colorLayer = [CALayer layer];     colorLayer.frame = CGRectMake(0, 0, 64, 64);     colorLayer.position = CGPointMake(0, 150);     colorLayer.backgroundColor = [UIColor greenColor].CGColor;     [self.view.layer addSublayer:colorLayer];      CAKeyframeAnimation *animation1 = [CAKeyframeAnimation animation];     animation1.keyPath = @"position";     animation1.path = bezierPath.CGPath;     animation1.rotationMode = kCAAnimationRotateAuto;      CABasicAnimation *animation2 = [CABasicAnimation animation];     animation2.keyPath = @"backgroundColor";     animation2.toValue = (__bridge id)[UIColor redColor].CGColor;      CAAnimationGroup *group = [CAAnimationGroup animation];     group.animations = @[animation1, animation2];     group.duration = 4.0f;      [colorLayer addAnimation:group forKey:nil]; }

CAKeyFrameAnimation