iOS Principle：CALayer（上）-阿里云开发者社区

方便记忆：

本质：CoreAnimation（CA）是在 OpenGL 和 CoreGraphics 上封装的动画 API，用于调用GPU
关系：UIView持有一个CALayer负责drawRect展示，view是这个layer的delegate，UIView可以响应事件
动画：CALayer图层类是CoreAnimation的基础，是所有核心动画图层的父类

CABasicAnimation：通过起止状态实现动画
CAKeyframeAnimation：额外指定关键帧间时间函数实现动画

UIView 动画原理：通过调用layer的actionForLayer:forKey实现动画
UIView动画的叠加方式：改变View属性做动画时，属性值会立即改变，动画后展示效果。动画未结束时，又加另一个动画，会进行叠加，最终停在view的真实位置。
展示层：presentationLayer为展示的状态
模型层：modelLayer是设置完立即生效的真实状态
使用实例1：注水动画效果（mask绿透性）

通过mask从两个方向为greenHead填充内容

使用实例2：大量圆角性能优化

直接改变layer的mask来替换改变cornerRadius的方式

CALayer的设计原则：

机制与策略分离：机制稳定，策略多修改
整体稳定：保证低bug率
各司其职：分散风险
减少暴露：遮蔽部分CALayer接口，易上手

CoreAnimation

什么是 CoreAnimation？

CoreAnimation(CA) 是苹果提供的一套基于绘图的动画框架。

在 Apple 的图形架构中，CoreAnimation 是在 OpenGL 和 CoreGraphics 的基础上封装的一套动画 API，而 OpenGL 和 CoreGraphics 则提供一些接口来访问图形硬件(GPU)。

CoreGraphics (CG) 是一个C语言库，是系统绘制界面、文字、图像等UI的基础。

所以 CoreAnimation 的位置关系应该是这个样子滴：

GPU —> OpenGL & CoreGraphics —> CoreAnimation

CoreAnimation 和 QuartzCore 的关系？

QuartzCore 主要结构:

CoreAnimation
CADisplayLink 定时器
CALayer 及其子类（参考上方链接）
CAMediaTiming 协议相关
CATransaction 事物相关
CATransform3D

QuartzCore 引用了 CoreAnimation 头文件，类似于对 CoreAnimation 的包装。

CALayer

在iOS中，我们所看到的视图UIView是通过QuartzCore(CoreAnimation) 中的CALayer显示出来的，我们讨论的动画效果也是加在这个CALayer上的。

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

为什么UIView要加一层Layer来负责显示呢？

我们知道 QuartzCore 是跨 iOS 和 macOS 平台的，而 UIView 属于 UIKit 是 iOS 开发使用的，在 macOS 中对应 AppKit 里的 NSView。

iOS —> UIKit(触控)      \
        QuartzCore
macOS —> 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
transform：指定图层的几何变换，类型为上篇说过的CATransform3D

如上图的这些属性，注释最后都有一句 Animatable，就是说我们可以通过改变这些属性来实现动画。

默认地，我们修改这些属性都会导致图层从旧值动画显示为新值，称为隐式动画。

注意到frame的注释里面是没有Animatable的。事实上，我们可以理解为图层的frame并不是一个真实的属性：当我们读取frame时，会根据图层position、bounds、anchorPoint和transform的值计算出它的frame；而当我们设置frame时，图层会根据anchorPoint改变position和bounds。也就是说frame本身并没有被保存。

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

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即属性动画。

/** Subclass for property-based animations. **/
CA_CLASS_AVAILABLE (10.5, 2.0, 9.0, 2.0)
@interface CAPropertyAnimation : CAAnimation
/* Creates a new animation object with its `keyPath' property set to
 * 'path'. */
+ (instancetype)animationWithKeyPath:(nullable NSString *)path;
/* The key-path describing the property to be animated. */
@property(nullable, copy) NSString *keyPath;
/* When true the value specified by the animation will be "added" to
 * the current presentation value of the property to produce the new
 * presentation value. The addition function is type-dependent, e.g.
 * for affine transforms the two matrices are concatenated. Defaults to
 * NO. */
@property(getter=isAdditive) BOOL additive;
/* The `cumulative' property affects how repeating animations produce
 * their result. If true then the current value of the animation is the
 * value at the end of the previous repeat cycle, plus the value of the
 * current repeat cycle. If false, the value is simply the value
 * calculated for the current repeat cycle. Defaults to NO. */
@property(getter=isCumulative) BOOL cumulative;
/* If non-nil a function that is applied to interpolated values
 * before they are set as the new presentation value of the animation's
 * target property. Defaults to nil. */
@property(nullable, strong) CAValueFunction *valueFunction;
@end

CAPropertyAnimation(属性动画)通过改变layer的可动画属性(位置、大小等)实现动画效果。

CABasicAnimation

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

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

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

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

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