CAAnimation解读

CAAnimation是一个抽象类，遵循了CAMediaTiming协议和CAAction协议！我们不要直接使用CAAnimation类，而是使用其子类：

• CATransition：提供渐变效果，如推拉push效果,消退fade效果,揭开reveal效果
• CAAnimationGroup：允许多个动画同时播放
• CABasicAnimation： 提供了对单一动画的实现
• CAKeyframeAnimation： 关键桢动画,可以定义动画路线
• CAPropertyAnimation：属性动画，通常不直接使用，而是使用CABasicAnimation子类

创建对象

我们看到有一个工厂方法来创建CAAnimation对象，因此，我们通常都使用这个方法来创建动画：

 

1 2 3

+ (instancetype)animation;

当然不同类型的子类使用的方法不一样，对于继承于CAPropertyAnimation的子类，都可以通过属性路径来创建：

 

1 2 3 4 5 6

/* Creates a new animation object with its `keyPath' property set to * 'path'. */   + (instancetype)animationWithKeyPath:(nullable NSString *)path;

遵守了CAMediaTiming协议

这个协议是是用于配置动画的相关属性的，英文部分是官方的注释，中文部分为笔者的理解，下面一一讲解：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

/* The begin time of the object, in relation to its parent object, if * applicable. Defaults to 0. */ // 获取或设置动画的开始时间，默认为0 @property CFTimeInterval beginTime;   /* The basic duration of the object. Defaults to 0. */ // 获取或设置动画的时长，也就是整个动画的总时长 @property CFTimeInterval duration;   /* The rate of the layer. Used to scale parent time to local time, e.g. * if rate is 2, local time progresses twice as fast as parent time. * Defaults to 1. */ // 获取或设置动画的播放速度，默认为1，若设置为2，则以两倍的速度播放。 // 如果设置小于1，则相当于慢放。 @property float speed;   /* Additional offset in active local time. i.e. to convert from parent * time tp to active local time t: t = (tp - begin) * speed + offset. * One use of this is to "pause" a layer by setting `speed' to zero and * `offset' to a suitable value. Defaults to 0. */ // 获取或设置当前播放的进度，默认为0。有这么一种使用场景：设置speed为0， // 然后设置这个timeOffset为合适的值，就可以暂停动画了 @property CFTimeInterval timeOffset;   /* The repeat count of the object. May be fractional. Defaults to 0. */ // 获取或设置动画播放次数，默认为0表示只播放一次。 // 设置为HUGE_VALF表示无限制播放次数 @property float repeatCount;   /* The repeat duration of the object. Defaults to 0. */ // 获取或设置重复播放的动画时长，不要与repeatCount混合使用 @property CFTimeInterval repeatDuration;   /* When true, the object plays backwards after playing forwards. Defaults * to NO. */ // 获取或设置是否回放。 // 如果设置为YES，在动画播放完成时，就会以动画的效果回到起点 // 如果设置为NO，播放完成时，就会停留在终点 @property BOOL autoreverses;   /* Defines how the timed object behaves outside its active duration. * Local time may be clamped to either end of the active duration, or * the element may be removed from the presentation. The legal values * are `backwards', `forwards', `both' and `removed'. Defaults to * `removed'. */ // 获取或设置动画完成时的动作 // forwards表示动画完成时，也回到起点而不是留在终点 // backwards表示动画完成时，就停留在终点 // removed表示完成时就移除，默认就是removed @property(copy) NSString *fillMode;

遵守了CAAction协议

这个协议只有一个方法，我们可以调用此方法来触发指定的事件，这样接收者就可以接收到代理。

 

1 2 3 4 5 6 7 8 9 10

/* Called to trigger the event named 'path' on the receiver. The object * (e.g. the layer) on which the event happened is 'anObject'. The * arguments dictionary may be nil, if non-nil it carries parameters * associated with the event. */   - (void)runActionForKey:(NSString *)event                  object:(id)anObject               arguments:(nullable NSDictionary *)dict;

CAAnimationDelegate代理

CAAnimation为这么个属性：

 

 

1 2 3 4 5 6 7

/* The delegate of the animation. This object is retained for the * lifetime of the animation object. Defaults to nil. See below for the * supported delegate methods. */   @property(nullable, strong) id delegate;

我们只要指定了代理，就可以实现这两个代理方法：

 

1 2 3 4 5 6 7 8 9 10 11 12

/* Called when the animation begins its active duration. */ // 动画开始时的回调 - (void)animationDidStart:(CAAnimation *)anim;   /* Called when the animation either completes its active duration or * is removed from the object it is attached to (i.e. the layer). 'flag' * is true if the animation reached the end of its active duration * without being removed. */ // 动画停止的回调，可以通过flag判断动画是否是完成还是暂停 - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;

removedOnCompletion属性

当我们动画完成时，如果希望动画就自动移除的话，我们可以设置此属性为YES，默认值为YES。如果我们想要循环或者执行多次动画，就将此属性设置为NO

 

1 2 3 4 5 6 7

/* When true, the animation is removed from the render tree once its * active duration has passed. Defaults to YES. */   // 当duration值已经达到时，是否将动画自动从渲染树上移除 @property(getter=isRemovedOnCompletion) BOOL removedOnCompletion;

timingFunction属性

这个属性是用于指定动画移动的步调是什么样式，比如线性。

 

1 2 3 4 5 6

/* A timing function defining the pacing of the animation. Defaults to * nil indicating linear pacing. */   @property(nullable, strong) CAMediaTimingFunction *timingFunction;

关于CAMediaTimingFunction类，主要是这向个方法。当创建时，我们+functionWithName:工厂方法来创建系统已经提供的样式。

 

1 2 3 4 5 6 7 8

/* A convenience method for creating common timing functions. The * currently supported names are `linear', `easeIn', `easeOut' and * `easeInEaseOut' and `default' (the curve used by implicit animations * created by Core Animation). */   + (instancetype)functionWithName:(NSString *)name;

其中这个name有这几个变量对应的：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

// 线性动画 CA_EXTERN NSString * const kCAMediaTimingFunctionLinear     __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);   // 快速进入动画 CA_EXTERN NSString * const kCAMediaTimingFunctionEaseIn     __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);   // 快速出来动画 CA_EXTERN NSString * const kCAMediaTimingFunctionEaseOut     __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);   // 快速进入出来动画 CA_EXTERN NSString * const kCAMediaTimingFunctionEaseInEaseOut     __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);      // 默认动画是curve动画，也就是曲线动画 CA_EXTERN NSString * const kCAMediaTimingFunctionDefault     __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_3_0);

如果我们想要让其移动动画是按贝塞尔曲线的路径行动，那么可以用这两个方法来创建：

 

1 2 3 4 5 6 7 8 9 10

/* Creates a timing function modelled on a cubic Bezier curve. The end * points of the curve are at (0,0) and (1,1), the two points 'c1' and * 'c2' defined by the class instance are the control points. Thus the * points defining the Bezier curve are: '[(0,0), c1, c2, (1,1)]' */   + (instancetype)functionWithControlPoints:(float)c1x :(float)c1y :(float)c2x :(float)c2y;   - (instancetype)initWithControlPoints:(float)c1x :(float)c1y :(float)c2x :(float)c2y;

转至：http://www.henishuo.com/caanimation-indtroduce-in-detail/ 

CAKeyFrameAnimation的使用中有以下主要的属性需要注意，有些属性可能比较绕比较难以理解，我会结合图片进行必要的说明。

（1）values属性

values属性指明整个动画过程中的关键帧点，例如上例中的A-E就是通过values指定的。需要注意的是，起点必须作为values的第一个值。

（2）path属性

作用与values属性一样，同样是用于指定整个动画所经过的路径的。需要注意的是，values与path是互斥的，当values与path同时指定时，path会覆盖values，即values属性将被忽略。例如上述例子等价于代码中values方式的path设置方式为：

1     CGMutablePathRef path = CGPathCreateMutable();
2     CGPathMoveToPoint(path, NULL, rectLayer.position.x - 15, rectLayer.position.y - 15);
3     CGPathAddLineToPoint(path, NULL, 320 - 15, rectLayer.frame.origin.y);
4     CGPathAddLineToPoint(path, NULL, 320 - 15, rectLayer.frame.origin.y + 100);
5     CGPathAddLineToPoint(path, NULL, 15, rectLayer.frame.origin.y + 100);
6     CGPathAddLineToPoint(path, NULL, 15, rectLayer.frame.origin.y);
7     rectRunAnimation.path = path;
8     CGPathRelease(path);

（3）keyTimes属性

该属性是一个数组，用以指定每个子路径(AB,BC,CD)的时间。如果你没有显式地对keyTimes进行设置，则系统会默认每条子路径的时间为：ti=duration/(5-1)，即每条子路径的duration相等，都为duration的1\4。当然，我们也可以传个数组让物体快慢结合。例如，你可以传入{0.0, 0.1,0.6,0.7,1.0}，其中首尾必须分别是0和1，因此tAB=0.1-0, tCB=0.6-0.1, tDC=0.7-0.6, tED=1-0.7.....

（4）timeFunctions属性

用过UIKit层动画的同学应该对这个属性不陌生，这个属性用以指定时间函数，类似于运动的加速度，有以下几种类型。上例子的AB段就是用了淡入淡出效果。记住，这是一个数组，你有几个子路径就应该传入几个元素

1 kCAMediaTimingFunctionLinear//线性
2 kCAMediaTimingFunctionEaseIn//淡入
3 kCAMediaTimingFunctionEaseOut//淡出
4 kCAMediaTimingFunctionEaseInEaseOut//淡入淡出
5 kCAMediaTimingFunctionDefault//默认

（5）calculationMode属性

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

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