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];
}

轨迹动画1.png

在代码运行中，我们确实看到了飞机的运行轨迹和我们定义的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];
}

轨迹动画2.png