实现动画方式深度解析（十七） —— Core Animation之CAKeyframeAnimation动画示例 （十四）

版本记录

版本号	时间
V1.0	2017.09.24

前言

app中好的炫的动画可以让用户耳目一新，为产品增色不少，关于动画的实现我们可以用基本动画、关键帧动画、序列帧动画以及基于CoreGraphic的动画等等，接下来这几篇我就介绍下我可以想到的几种动画绘制方法。具体Demo示例已开源到Github —— 刀客传奇，感兴趣的可以看我写的另外几篇。
1. 实现动画方式深度解析（一） —— 播放GIF动画（一）
2. 实现动画方式深度解析（二） —— 播放GIF动画之框架FLAnimatedImage的使用（二）
3. 实现动画方式深度解析（三） —— 播放序列帧动画（一）
4. 实现动画方式深度解析（四） —— QuartzCore框架（一）
5. 实现动画方式深度解析（五） —— QuartzCore框架之CoreAnimation（二）
6. 实现动画方式深度解析（六） —— Core Animation Basics（三）
7. 实现动画方式深度解析（七） —— Core Animation之Setting Up Layer Objects（四）
8. 实现动画方式深度解析（八） —— Core Animation之动画层内容 （五）
9. 实现动画方式深度解析（九） —— Core Animation之构建图层层级 （六）
10. 实现动画方式深度解析（十） —— Core Animation之高级动画技巧 （七）
11. 实现动画方式深度解析（十一） —— Core Animation之更改图层的默认行为（八）
12. 实现动画方式深度解析（十二） —— Core Animation之提高动画的性能（九）
13. 实现动画方式深度解析（十三） —— Core Animation之图层样式属性动画（十）
14. 实现动画方式深度解析（十四） —— Core Animation之 KVC 扩展（十一）
15. 实现动画方式深度解析（十五） —— Core Animation之可动画属性 （十二）
16. 实现动画方式深度解析（十六） —— Core Animation之CABasicAnimation动画示例 （十三）

CAKeyframeAnimation关键帧动画基本

下面我们就先看一下API文档。

/** General keyframe animation class. **/

CA_CLASS_AVAILABLE (10.5, 2.0, 9.0, 2.0)
@interface CAKeyframeAnimation : CAPropertyAnimation

/* An array of objects providing the value of the animation function for
 * each keyframe. */

@property(nullable, copy) NSArray *values;

/* An optional path object defining the behavior of the animation
 * function. When non-nil overrides the `values' property. Each point
 * in the path except for `moveto' points defines a single keyframe for
 * the purpose of timing and interpolation. Defaults to nil. For
 * constant velocity animation along the path, `calculationMode' should
 * be set to `paced'. Upon assignment the path is copied. */

@property(nullable) CGPathRef path;

/* An optional array of `NSNumber' objects defining the pacing of the
 * animation. Each time corresponds to one value in the `values' array,
 * and defines when the value should be used in the animation function.
 * Each value in the array is a floating point number in the range
 * [0,1]. */

@property(nullable, copy) NSArray *keyTimes;

/* An optional array of CAMediaTimingFunction objects. If the `values' array
 * defines n keyframes, there should be n-1 objects in the
 * `timingFunctions' array. Each function describes the pacing of one
 * keyframe to keyframe segment. */

@property(nullable, copy) NSArray *timingFunctions;

/* The "calculation mode". Possible values are `discrete', `linear',
 * `paced', `cubic' and `cubicPaced'. Defaults to `linear'. When set to
 * `paced' or `cubicPaced' the `keyTimes' and `timingFunctions'
 * properties of the animation are ignored and calculated implicitly. */

@property(copy) NSString *calculationMode;

/* For animations with the cubic calculation modes, these properties
 * provide control over the interpolation scheme. Each keyframe may
 * have a tension, continuity and bias value associated with it, each
 * in the range [-1, 1] (this defines a Kochanek-Bartels spline, see
 * http://en.wikipedia.org/wiki/Kochanek-Bartels_spline).
 *
 * The tension value controls the "tightness" of the curve (positive
 * values are tighter, negative values are rounder). The continuity
 * value controls how segments are joined (positive values give sharp
 * corners, negative values give inverted corners). The bias value
 * defines where the curve occurs (positive values move the curve before
 * the control point, negative values move it after the control point).
 *
 * The first value in each array defines the behavior of the tangent to
 * the first control point, the second value controls the second
 * point's tangents, and so on. Any unspecified values default to zero
 * (giving a Catmull-Rom spline if all are unspecified). */

@property(nullable, copy) NSArray *tensionValues;
@property(nullable, copy) NSArray *continuityValues;
@property(nullable, copy) NSArray *biasValues;

/* Defines whether or objects animating along paths rotate to match the
 * path tangent. Possible values are `auto' and `autoReverse'. Defaults
 * to nil. The effect of setting this property to a non-nil value when
 * no path object is supplied is undefined. `autoReverse' rotates to
 * match the tangent plus 180 degrees. */

@property(nullable, copy) NSString *rotationMode;

@end

/* `calculationMode' strings. */

CA_EXTERN NSString * const kCAAnimationLinear
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAAnimationDiscrete
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAAnimationPaced
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAAnimationCubic
    CA_AVAILABLE_STARTING (10.7, 4.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAAnimationCubicPaced
    CA_AVAILABLE_STARTING (10.7, 4.0, 9.0, 2.0);

/* `rotationMode' strings. */

CA_EXTERN NSString * const kCAAnimationRotateAuto
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAAnimationRotateAutoReverse
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);

---

CAKeyframeAnimation几个重要属性

关键帧动画有几个重要的属性，下面我们就看一下。

• values属性
  values属性指明整个动画过程中的关键帧点。

• path属性
  作 用与values属性一样，同样是用于指定整个动画所经过的路径的。需要注意的是，values与path是互斥的，当values与path同时指定 时，path会覆盖values，即values属性将被忽略

• keyTimes属性
  该 属性是一个数组，用以指定每个子路径(AB,BC,CD)的时间。如果你没有显式地对keyTimes进行设置，则系统会默认每条子路径的时间是均分的。

• timeFunctions属性
  用过UIKit层动画的同学应该对这个属性不陌生，这个属性用以指定时间函数，类似于运动的加速度，有以下几种类型

kCAMediaTimingFunctionLinear                  //线性
kCAMediaTimingFunctionEaseIn                 //淡入
kCAMediaTimingFunctionEaseOut              //淡出
kCAMediaTimingFunctionEaseInEaseOut  //淡入淡出 
kCAMediaTimingFunctionDefault                //默认

• calculationMode属性
  该属性决定了物体在每个子路径下是跳着走还是匀速走，跟timeFunctions属性有点类似。

1 const kCAAnimationLinear//线性，默认
2 const kCAAnimationDiscrete//离散，无中间过程，但keyTimes设置的时间依旧生效，物体跳跃地出现在各个关键帧上
3 const kCAAnimationPaced//平均，keyTimes跟timeFunctions失效
4 const kCAAnimationCubic//平均，同上
5 const kCAAnimationCubicPaced//平均，同上

---

CAKeyframeAnimation相关动画

CAKeyframeAnimation关键帧动画有两种方式，分别是values数组样式，还有就是路径方式，下面我们就看一下。

@property(nullable, copy) NSArray *values;
@property(nullable) CGPathRef path;

1. values数组属性方式

下面我们看一下代码

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic, strong) UIView *animateView;


@end

@implementation ViewController

#pragma mark - Override Base Function

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    //UI
    [self setupUI];
    
    //值的方式关键帧动画
    [self demoValuesKeyFrameAnimation];
}

#pragma mark - Object Private Function

- (void)demoValuesKeyFrameAnimation
{
    //值的方式
    CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    
    //设置值数组
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(50.0, 300.0)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(350.0, 300.0)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(350.0, 500.0)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(50.0, 500.0)];
    
    keyFrameAnimation.values = @[value1, value2, value3, value4];
    
    keyFrameAnimation.repeatCount = 10.0;
    keyFrameAnimation.autoreverses = YES;
    keyFrameAnimation.duration = 4.0;
    keyFrameAnimation.removedOnCompletion = NO;
    keyFrameAnimation.fillMode = kCAFillModeForwards;
    keyFrameAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    [self.animateView.layer addAnimation:keyFrameAnimation forKey:nil];
}

- (void)setupUI
{
    self.view.backgroundColor = [UIColor lightGrayColor];
    
    self.animateView = [[UIView alloc] initWithFrame:CGRectMake(50.0, 200.0, 150.0, 150.0)];
    self.animateView.backgroundColor = [UIColor redColor];
    [self.view addSubview:self.animateView];
}

@end

下面我们看一下效果验证

2. path路径方式

下面我们就看一下设置路径方式的关键帧动画。

还是直接看代码

- (void)demoPathKeyFrameAnimation
{
    self.animateView.frame = CGRectMake(0.0, 0.0, 100.0, 100.0);
    
    //路径的方式
    CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    
    //设置路径
    CGMutablePathRef pathRef = CGPathCreateMutable();
    
    //沿着弧线运动
    CGPathAddEllipseInRect(pathRef, NULL, CGRectMake(100.0, 100.0, 100.0, 100.0));
    
    //起始位置
    CGPathMoveToPoint(pathRef, NULL, 0.0, 400.0);
    
    //直线运动
    CGPathAddLineToPoint(pathRef, NULL, 200.0, 300.0);
    CGPathAddLineToPoint(pathRef, NULL, 400.0, 300.0);
    CGPathAddLineToPoint(pathRef, NULL, 400.0, 500.0);
    CGPathAddLineToPoint(pathRef, NULL, 0.0, 500.0);
 
    //曲线运动
    CGPathAddCurveToPoint(pathRef, NULL, 50.0, 50.0, 50.0, 50.0, 50.0, 50.0);
    
    //其他配置
    keyFrameAnimation.path = pathRef;
    CGPathRelease(pathRef);
    keyFrameAnimation.autoreverses = YES;
    keyFrameAnimation.repeatCount = 10;
    keyFrameAnimation.removedOnCompletion = NO;
    keyFrameAnimation.fillMode = kCAFillModeForwards;
    keyFrameAnimation.duration = 5.0;
    keyFrameAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    [self.animateView.layer addAnimation:keyFrameAnimation forKey:nil];
    
}

下面看一下效果图

后记

未完，待续~~~