关于CoreAnimation

Render, compose, and animate visual elements. ---- Apple

CoreAnimation是苹果提供的一套基于绘图的动画框架,但是并不仅仅是用来做动画效果的框架,海报框了图形绘制,投影,动画的Object-C类的几何.大致体系结构如下:

image.png

最上层的UIKit属于应用层,处理与用户的交互,往下访问CoreAnimation对OpenGL ES/Metal和CoreGraphics封装的API,由OpenGL ES/Metal和CoreGraphics为访问GPU提供接口

CALayer?

CoreAnimation属于QuartzCore框架，Quartz原本是macOS的Darwin核心之上的绘图技术。在iOS中，我们所看到的视图UIView是通过QuartzCore中的CALayer显示出来的，我们讨论的动画效果也是加在这个CALayer上的。

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

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

CALayer和UIView的区别

1. UIView是UIKit的(只能iOS使用)，CALayer是QuartzCore的(iOS和mac os通用)
2. UIView继承UIResponder,CALayer继承NSObject,UIView比CALayer多了一个事件处理的功能，也就是说，CALayer不能处理用户的触摸事件，而UIView可以
3. UIView来自CALayer，是CALayer的高层实现和封装，UIView的所有特性来源于CALayer支持
4. CABasicAnimation，CAAnimation，CAKeyframeAnimation等动画类都需要加到CALayer上

其实UIView之所以能显示在屏幕上，完全是因为它内部的一个图层，在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个层。

1480865231251244.png

image.png

Core Animation 渲染

Core Animation Pipeline 渲染流水线

image.png

整个流水线一共有下面几个步骤：
Handle Events：这个过程中会先处理点击事件，这个过程中有可能会需要改变页面的布局和界面层次。

Commit Transaction：此时 app 会通过 CPU 处理显示内容的前置计算，比如布局计算、图片解码等任务，接下来会进行详细的讲解。之后将计算好的图层进行打包发给 Render Server。

Decode：打包好的图层被传输到 Render Server 之后，首先会进行解码。注意完成解码之后需要等待下一个 RunLoop 才会执行下一步 Draw Calls。

Draw Calls：解码完成后，Core Animation 会调用下层渲染框架（比如 OpenGL 或者 Metal）的方法进行绘制，进而调用到 GPU。

Render：这一阶段主要由 GPU 进行渲染。

Display：显示阶段，需要等 render 结束的下一个 RunLoop 触发显示。

Commit Transaction 发生了什么

一般开发当中能影响到的就是 Handle Events 和 Commit Transaction 这两个阶段，这也是开发者接触最多的部分。Handle Events 就是处理触摸事件，而 Commit Transaction 这部分中主要进行的是：Layout、Display、Prepare、Commit 等四个具体的操作。

Layout：构建视图

这个阶段主要处理视图的构建和布局，具体步骤包括：

调用重载的 layoutSubviews 方法
创建视图，并通过 addSubview 方法添加子视图
计算视图布局，即所有的 Layout Constraint
由于这个阶段是在 CPU 中进行，通常是 CPU 限制或者 IO 限制，所以我们应该尽量高效轻量地操作，减少这部分的时间，比如减少非必要的视图创建、简化布局计算、减少视图层级等。

Display：绘制视图

这个阶段主要是交给 Core Graphics 进行视图的绘制，注意不是真正的显示，而是得到前文所说的图元 primitives 数据：

根据上一阶段 Layout 的结果创建得到图元信息。
如果重写了 drawRect: 方法，那么会调用重载的 drawRect: 方法，在 drawRect: 方法中手动绘制得到 bitmap 数据，从而自定义视图的绘制。
注意正常情况下 Display 阶段只会得到图元 primitives 信息，而位图 bitmap 是在 GPU 中根据图元信息绘制得到的。但是如果重写了 drawRect: 方法，这个方法会直接调用 Core Graphics 绘制方法得到 bitmap 数据，同时系统会额外申请一块内存，用于暂存绘制好的 bitmap。

由于重写了 drawRect: 方法，导致绘制过程从 GPU 转移到了 CPU，这就导致了一定的效率损失。与此同时，这个过程会额外使用 CPU 和内存，因此需要高效绘制，否则容易造成 CPU 卡顿或者内存爆炸。

Prepare：Core Animation 额外的工作

这一步主要是：图片解码和转换

Commit：打包并发送

这一步主要是：图层打包并发送到 Render Server。

注意 commit 操作是依赖图层树递归执行的，所以如果图层树过于复杂，commit 的开销就会很大。这也是我们希望减少视图层级，从而降低图层树复杂度的原因。

Rendering Pass： Render Server 的具体操作

image.png

Render Server 通常是 OpenGL 或者是 Metal。以 OpenGL 为例，那么上图主要是 GPU 中执行的操作，具体主要包括：

1. GPU 收到 Command Buffer，包含图元 primitives 信息
2. Tiler 开始工作：先通过顶点着色器 Vertex Shader 对顶点进行处理，更新图元信息
3. 平铺过程：平铺生成 tile bucket 的几何图形，这一步会将图元信息转化为像素，之后将结果写入 Parameter Buffer 中
4. Tiler 更新完所有的图元信息，或者 Parameter Buffer 已满，则会开始下一步
5. Renderer 工作：将像素信息进行处理得到 bitmap，之后存入 Render Buffer
6. Render Buffer 中存储有渲染好的 bitmap，供之后的 Display 操作使用

使用 Instrument 的 OpenGL ES，可以对过程进行监控。OpenGL ES tiler utilization 和 OpenGL ES renderer utilization 可以分别监控 Tiler 和 Renderer 的工作情况

参考文献:iOS 渲染原理解析