首先我们先来回顾一下Core Animation
的基础概念:
Core Animation
是 iOS 和 OS X 平台上负责 图形渲染 与 动画 的基础框架。Core Animation
可以作用于动画视图或者其他可视元素,可以完成动画所需的大部分绘帧工作。Core Animation
将大部分实际的绘图任务交给了图形硬件(GPU
)来处理,图形硬件会加速图形渲染的速度。这种自动化的图形加速技术让动画拥有更高的帧率并且显示效果更加平滑,不会加重CPU的负担而影响程序的运行速度。
iOS App 的图形渲染技术栈
App 使用 Core Graphics、Core Animation、Core Image
等框架来绘制可视化内容,这些软件框架相互之间也有着依赖关系。这些框架都需要通过 OpenGL/Metal
来调用 GPU 进行绘制,最终将内容显示到屏幕之上。结构图如下:

Core Animation
在iOS架构中的位置:

-
Core Animation
本质上可以理解为一个复合引擎,其职责是尽可能快地组合屏幕上不同的可视内容,这些可视内容可被分解成独立的图层(即CALayer
),这些图层会被存储在一个叫做图层树的体系之中。从本质上而言,CALayer
是用户所能在屏幕上看见的一切的基础。
主要负责:渲染(Render
)、构建(Compose
)和实现动画(Animate visual elements
)。 -
Core Graphics
基于 Quartz 高级绘图引擎,主要用于 运行时绘制图像。开发者可以使用此框架来处理基于路径的绘图,转换,颜色管理,离屏渲染,图案,渐变和阴影,图像数据管理,图像创建和图像遮罩以及 PDF 文档创建,显示和分析。
当开发者需要在 运行时创建图像 时,可以使用Core Graphics
去绘制。与之相对的是 运行前创建图像,例如用 Photoshop 提前做好图片素材直接导入应用。相比之下,我们更需要 Core Graphics 去在运行时实时计算、绘制一系列图像帧来实现动画。 -
Core Image
与Core Graphics
恰恰相反,Core Graphics
用于在** 运行时创建图像**,而Core Image
是用来处理 运行前创建的图像 的。Core Image
框架拥有一系列现成的图像过滤器,能对已存在的图像进行高效的处理。大部分情况下,
Core Image
会在 GPU 中完成工作,但如果 GPU 忙,会使用 CPU 进行处理。
CoreAnimation
渲染流水线
首先看张图:

事实上,app 本身并不负责渲染,渲染则是由一个独立的进程负责,即 Render Server
进程。
App 通过 IPC(Inter-Process Communication,进程间通信) 将渲染任务及相关数据提交给 Render Server
。Render Server
处理完数据后,再传递至 GPU
。最后由GPU
调用 iOS 的图像设备进行显示。
CPU和GPU在计算机中的角色
CPU(Central Processing Unit)
:现代计算机整个系统的运算核心、控制核⼼。
GPU(Graphics Processing Unit)
:可进⾏绘图运算工作的专用微处理器,是连接计算机和显示终端的纽带。
Core Animation 流水线的详细过程如下:
- 1、由 app 处理事件(
Handle Events
),如:用户的点击操作,在此过程中 app 可能需要更新 视图树,相应地,图层树 也会被更新。 - 2、app 通过 CPU 完成对显示内容的计算,如:视图的创建、布局计算、图片解码、文本绘制等。在完成对显示内容的计算之后,app 对图层进行打包,并在下一次
RunLoop
时将其发送至Render Server
,即完成了一次Commit Transaction
操作。 - 3、
Render Server
主要执行OpenGL/Metal、Core Graphics
相关程序,并调用 GPU。GPU 则在物理层上完成了对图像的渲染。 - 4、GPU 通过顶点数据、顶点着色器、片元着色器、runloop、
Frame Buffer
、视频控制器等相关操作,将图像显示在屏幕上。
Commit Transaction
步骤:
- 1、
Layout
:该阶段主要进行视图构建,包括:LayoutSubviews
方法的重载,addSubview:
方法填充子视图等。 - 2、
Display
:该阶段主要进行视图绘制,这里仅仅是设置将要成像的 图元数据。重载视图的drawRect:
方法可以自定义 UIView 的显示,其原理是在drawRect:
方法内部绘制寄宿图,该过程使用 CPU 和内存。 - 3、
Prepare
:该阶段属于附加步骤,一般处理图像的解码和转换等操作。 - 4、
Commit
:该阶段将图层进行打包,并将它们发送至Render Server
。该过程会 递归执行,因为图层和视图都是以树形结构存在。
Render Server
的执行流程:
iOS 动画的渲染也是基于上述 Core Animation 流水线完成的。这里我们重点关注 app 与 Render Server 的执行流程。
日常开发中,如果不是特别复杂的动画,一般使用UIView Animation
实现,iOS 将其处理过程分为如下三部阶段:
Step1:调用 animationWithDuration:animations:
方法
Step2:在 Animation Block
中进行 Layout,Display,Prepare,Commit
等步骤。
Step3:Render Server
根据 Animation
逐帧进行渲染。

网友评论