核心动画 -- CAKeyframeAnimation

在上一篇介绍的CABasicAnimation 中可以简单实现一个位置到另外一个位置的动画。但是在现实开发中这个基础动画并不能解决一些动画，如位置连续变动，图片渐入渐出等。所以本篇文章介绍另外一个动画类：CAKeyframeAnimation也叫关键帧动画。它可以实现某一属性按照一串的数值进行动画，有点类似动态图。

下面介绍CAKeyframeAnimation的两个常用属性：

1、values
它可以设置一组关键帧的值，让图层按照这些值动起来。

CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animation];
keyframeAnimation.keyPath = @"position";

NSValue *v1 = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
NSValue *v2 = [NSValue valueWithCGPoint:CGPointMake(150, 0)];
NSValue *v3 = [NSValue valueWithCGPoint:CGPointMake(150, 150)];
NSValue *v4 = [NSValue valueWithCGPoint:CGPointMake(0, 150)];
//设置动画路线
keyframeAnimation.values = @[v1, v2, v3, v4];

//动画持续时间  每帧动画执行时长 = 总时长/(总帧数-1)
keyframeAnimation.duration = 2.0;
//设置每帧动画的时长(和duration配合用)， 并且第一个必须是0.0，最后一个必须是1.0；所以第一帧动画时长为（0.5-0.0）*duration，后面以此类推。
//keyframeAnimation.keyTimes = @[@(0.0),@(0.5), @(0.7), @(1.0)];

//动画执行结束保持最后状态
keyframeAnimation.fillMode = kCAFillModeForwards;
keyframeAnimation.removedOnCompletion = NO;

//设置YES 则动画执行结束后会原路返回再执行一遍
//keyframeAnimation.autoreverses = YES;

[self.myView.layer addAnimation:keyframeAnimation forKey:nil];

---

2、path

CAKeyframeAnimation *keyframeAnimation = [CAKeyframeAnimation animation];
keyframeAnimation.keyPath = @"position";

CGMutablePathRef pathRef = CGPathCreateMutable();
CGPathMoveToPoint(pathRef, NULL, 50, 100);
CGPathAddCurveToPoint(pathRef, NULL, 50, 200, 150, 300, 200, 200);
CGPathAddCurveToPoint(pathRef, NULL, 150, 300, 250, 400, 350, 350);
//设置曲线动画  
keyframeAnimation.path = pathRef;

//动画持续时间  每帧动画执行时长 = 总时长/(总帧数-1)
keyframeAnimation.duration = 2.0;

//设置动画执行节奏
keyframeAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
/* 动画执行速度
   kCAMediaTimingFunctionLinear  匀速
   kCAMediaTimingFunctionEaseIn  渐入
   kCAMediaTimingFunctionEaseOut  渐出
   kCAMediaTimingFunctionEaseInEaseOut 渐入渐出 中间快
   kCAMediaTimingFunctionDefault 默认
*/

//动画执行结束保持最后状态
keyframeAnimation.fillMode = kCAFillModeForwards;
keyframeAnimation.removedOnCompletion = NO;

[self.redView.layer addAnimation:keyframeAnimation forKey:nil];

---