iOS CALayer与iOS动画讲解及使用

1.关于CoreAnimation

CoreAnimation是苹果提供的一套基于绘图的动画框架，下图是官方文档中给出的体系结构。

CoreAnimation所在的位置

从图中可以看出，最底层是图形硬件(GPU)；上层是OpenGL和CoreGraphics，提供一些接口来访问GPU；再上层的CoreAnimation在此基础上封装了一套动画的API。最上面的UIKit属于应用层，处理与用户的交互。所以，学习CoreAnimation也会涉及一些图形学的知识，了解这些有助于我们更顺手的使用以及更高效的解决问题。

2.初识CALayer

CoreAnimation属于QuartzCore框架，Quartz原本是macOS的Darwin核心之上的绘图技术。在iOS中，我们所看到的视图UIView是通过QuartzCore中的CALayer显示出来的，我们讨论的动画效果也是加在这个CALayer上的。
下面主要的内容是：
CALayer(图层类)和CAAnimation(动画类)的内容和关系
以及他们实现的一个重要协议CAMediaTiming

CALayer图层类是CoreAnimation的基础，它提供了一套抽象概念。CALayer是整个图层类的基础，它是所有核心动画图层的父类

1.CALayer

为什么UIView要加一层Layer来负责显示呢？我们知道QuartzCore是跨iOS和macOS平台的，而UIView属于UIKit是iOS开发使用的，在macOS中对应AppKit里的NSView。这是因为macOS是基于鼠标指针操作的系统，与iOS的多点触控有本质的区别。虽然iOS在交互上与macOS有所不同，但在显示层面却可以使用同一套技术。
每一个UIView都有个属性layer、默认为CALayer类型，也可以使用自定义的Layer

/* view的leyer，view是layer的代理 */
@property(nonatomic,readonly,strong) CALayer  *layer;

可以想象我们看到的View其实都是它的layer，下面我们通过CALayer中的集合相关的属性来认识它：

bounds:图层的bounds是一个CGRect的值，指定图层的大小（bounds.size)和原点(bounds.origin)
position：指定图层的位置(相对于父图层而言)
anchorPoint：锚点指定了position在当前图层中的位置，坐标范围 0~1。position点的值是相对于父图层的，而这个position到底位于当前图层的什么地方，是由锚点决定的。(默认在图层的中心，即锚点为 (0.5,0.5) )
transform：指定图层的几何变换，类型为上篇说过的CATransform3D

这些属性的注释最后都有一句Animatable，就是说我们可以通过改变这些属性来实现动画。默认地，我们修改这些属性都会导致图层从旧值动画显示为新值，称为隐式动画。
注意到frame的注释里面是没有Animatable的。事实上，我们可以理解为图层的frame并不是一个真实的属性：当我们读取frame时，会根据图层position、bounds、anchorPoint和transform的值计算出它的frame；而当我们设置frame时，图层会根据anchorPoint改变position和bounds。也就是说frame本身并没有被保存。

图层不但给自己提供可视化的内容和管理动画，而且充当了其他图层的容器类，构建图层层次结构

图层树类似于UIView的层次结构，一个view实例拥有父视图(superView)和子视图(subView)；同样一个layer也有父图层(superLayer)和子图层(subLayer)。我们可以直接在view的layer上添加子layer达到一些显示效果，但这些单独的layer无法像UIView那样进行交互响应。

2.CAAnimation

CALayer提供以下方法来管理动画：

- (void)addAnimation:(CAAnimation*)anim forKey:(nullable NSString*)key;

- (void)removeAllAnimations;

- (void)removeAnimationForKey:(NSString*)key;

- (nullable NSArray<NSString*>*)animationKeys;

- (nullable CAAnimation*)animationForKey:(NSString*)key;

CAAnimation是动画基类，我们常用的CABasicAnimation和CAKeyframeAnimation都继承于CAPropertyAnimation即属性动画。属性动画通过改变layer的可动画属性(位置、大小等)实现动画效果。CABasicAnimation可以看做有两个关键帧的CAKeyframeAnimation，通过插值形成一条通过各关键帧的动画路径。但CABasicAnimation更加灵活一些：

@interface CABasicAnimation : CAPropertyAnimation
@property(nullable, strong) id fromValue;
@property(nullable, strong) id toValue;
@property(nullable, strong) id byValue;
@end

我们可以通过上面三个值来规定CABasicAnimation的动画起止状态

这三个属性都是可选的，通常给定其中一个或者两个，以下是官方建议的使用方式
给定fromValue和toValue，将在两者之间进行插值 *
给定fromValue和byValue，将在fromValue和fromValue+byValue之间插值 *
给定byValue和toValue，将在toValue-byValue和toValue之间插值 *
仅给定fromValue，将在fromValue和当前值之间插值 *
仅给定toValue，将在当前值和toValue之间插值 *
仅给定byValue，将在当前值和当前值+byValue之间插值 *

在CAKeyframeAnimation中，除了给定各关键帧之外还可以指定关键帧之间的时间和时间函数：

@interface CAKeyframeAnimation : CAPropertyAnimation

@property(nullable, copy) NSArray *values;
@property(nullable, copy) NSArray<NSNumber *> *keyTimes;
/* 时间函数有线性、淡入、淡出等简单效果，还可以指定一条三次贝塞尔曲线 */
@property(nullable, copy) NSArray<CAMediaTimingFunction *> *timingFunctions;

@end

到这我们已经能够感觉到，所谓动画实际上就是在不同的时间显示不同画面，时间在走进而形成连续变化的效果。所以，动画的关键就是对时间的控制。

3.CAMediaTiming

CAMediaTiming是CoreAnimation中一个非常重要的协议，CALayer和CAAnimation都实现了它来对时间进行管理。
协议定义了8个属性，通过它们来控制时间，这些属性大都见名知意：

@protocol CAMediaTiming

@property CFTimeInterval beginTime;
@property CFTimeInterval duration;
@proterty float speed;
/* timeOffset时间的偏移量，用它可以实现动画的暂停、继续等效果*/
@proterty CFTimeInterval timeOffset;
@property float repeatCount;
@property CFTimeInterval repeatDuration;
/* autoreverses为true时时间结束后会原路返回，默认为false */
@property BOOL autoreverses;
/* fillMode填充模式，有4种，见下 */
@property(copy) NSString *fillMode;

@end

下面这张图形象的说明了这些属性是如何灵活的进行动画时间控制的：

动画时间控制图片

需要注意的是，CALayer也实现了CAMediaTiming协议，也就是说如果我们将layer的speed设置为2，那么加到这个layer上的动画都会以两倍速执行。

上面从图层、动画和时间控制的关系上简单认识了CALayer、属性动画和动画时间控制，了解属性动画是根据时间在各关键帧之间进行插值，随时间连续改变layer的某动画属性来实现的。

这篇介绍的CALayer的基本知识和基础属性，下一篇CALayer的使用和animation属性(一)介绍CALayer动画的原理、展示层(presentationLayer)和模型层(modelLayer)

CALayer的使用和animation属性(一)

iOS CALayer与iOS动画 讲解及使用