笔记-iOS渲染框架

2019-03-29  本文已影响0人  佐_笾
006.jpg

UIKit

UIKit是iOS开发最常用的框架,可以通过设置UIKit组件的布局以及相关属性来绘制界面。
事实上,UIKit自身并不具备在屏幕成像的能力,其主要负责对用户操作事件的响应(UIView继承自UIResponder),事件响应的传递大体是经过逐层的视图树遍历实现的。

Core Animation

Core Animation源自于Layer Kit,动画只是Core Animation的冰山一角。
Core Animation是一个复合引擎,其职责是尽可能快地组合屏幕上不同的可视内容,这些可视内容可被分解成独立的图层(即CALayer),这些图层会被存储在一个叫做图层树的体系之中。从本质上而言,CALayer是用户所能在屏幕上看见的一切的基础。

Core Graphics

Core Graphics基于Quartz高级绘图引擎,主要用于运行时绘制图像。开发者可以使用此框架来处理基于路径的绘图,转换,颜色管理,离屏渲染,图案,渐变和阴影,图像数据管理,图像创建和图像遮罩以及PDF文档创建,显示和分析。

当开发者需要在运行时创建图像时,可以使用Core Graphics去绘制。与之相对的是运行前创建图像,例如用Photoshop提前做好图片素材直接导入应用。相比之下,我们更需要Core Graphics去在运行时实时计算、绘制一系列图像帧来实现动画。

Core Image

Core ImageCore Graphics恰恰相反,Core Graphics用于在运行时创建图像,而Core Image用于处理运行前创建的图像。Core Image框架拥有一系列现成的图像过滤器,能对一寸照的图像进行高效的处理。
大部分情况下,Core Image会在GPU中完成工作,如果GPU忙,会使用CPU进行处理。

OpenGL ES

OpenGL ESOpenGL的子集。在图形渲染原理一文中提到过OpenGL是一套第三方标准,函数的内部实现由对应的GPU厂商开发实现。

UIView与CALayer的关系

CALayer事实上是用户所能在屏幕上看见的一切的基础。为什么UIKit中的视图能够呈现可视化内容,就是因为UIKit中的每一个UI视图控件其实内部都有一个关联的CALayer,即backing layer
由于这种一一对应的关系,视图层级有用视图树的树形结构,对应CALayer层级也拥有图层树的树形结构。

其中,视图的职责是创建并管理图层,以确保当子视图在层级关系中添加或被移除时,其关联的图层在图层树中也有相同的操作,即保证视图树和图层树在结构上的一致性。

为什么iOS要基于UIView和CALayer提供两个平行的层级关系呢?

其原因在于要做职责分离,这样也能避免很多重复代码。在iOS和Mac OSX两个平台上,事件和用户交互有很多地方的不同,基于多点触控的用户界面和基于鼠标键盘的交互有着本质的区别,这就是为什么iOS有UIKitUIView,对应Mac OSX有AppKitNSView的原因。它们在功能上很相似,但是在实现上有着显著的区别。

实际上,这里并不是两个层级关系,而是四个。每一个都扮演着不同的角色。除了视图树图层树,还有呈现树渲染树

CALayer
那么为什么CALayer可以呈现可视化内容呢?因为CALayer基本等同于一个纹理。纹理是GPU进行图像渲染的重要依据。

图形渲染原理中提到纹理本质上就是一张图片,因此CALayer也包含一个contents属性指向一块缓存区,称为backing store,可以存放位图(Bitmap)。iOS中将该缓存区保存的图片称为寄宿图

image

图形渲染流水线支持从顶点开始进行绘制(在流水线中,顶点会被处理生成纹理),也支持直接使用纹理(图片)进行渲染。相应地,在实际开发中,绘制界面也有两种方式: 一种是手动绘制;另一种是使用图片

对此,iOS中也有两种相应的实现方式:

Contents Image
Contents Image是指通过CALayercontents属性来配置图片。然而,contents属性的类型为id,在这种情况下,可以给contents属性赋予任何值,app仍可以编译通过。但是在实践中,如果contents的值不是CGImage,得到的图层将是空白的。

既然如此,为什么要将contents的属性类型定义为id而非CGImage。因为在Mac OS系统中,该属性对CGImageNSImage类型的值都起作用,而在iOS系统中,该属性只对CGImage起作用。

本质上,contents属性指向的一块缓存区域,称为backing store,可以存放bitmap数据。

Custom Drawing
Custom Drawing是指使用Core Graphics直接绘制寄宿图。实际开发中,一般通过继承UIView并实现-drawRect:方法来自定义绘制。

虽然-drawRect:是一个UIView方法,但事实上都是底层的CALayer完成了重绘工作并保存了产生的图片。
下图所示为drawRect:绘制定义寄宿图的基本原理

image
- (void)displayLayer:(CALayer *)layer;
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx;

Core Animation 流水线

介绍一下Core Animation流水线的工作原理:

image
事实上,app本身并不负责渲染,渲染则是由一个独立的进程负责,即Render Server进程。

App通过IPC将渲染任务及相关数据提交给Render ServerRender Server处理完数据后,再传递至GPU。最后由GPU调用iOS的图像设备进行显示。

Core Animation流水线的详细过程如下:

对上述步骤进行串联,他们执行所消耗的时间圆圆超过16.67ms,因此为了满足对屏幕的60FPS刷新率的支持,需要将这些步骤进行分解,通过流水线的方式并行执行,如下图:


image

Commit Transaction

Core Animation流水线中,app调用Render Server前的最后一步Commit Transaction其实可以细分为4个步骤:

Layout

Layout阶段主要进行视图构建,包括:LayoutSubviews方法的重载,addSubview:方法填充子视图等。

Display

Display阶段主要进行视图绘制,这里仅仅是设置成像的图元数据。重载视图的drawRect:方法可以自定义UIView的显示,其原理是在drawRect:方法内部绘制寄宿图,该过程使用GPU和内存。

Prepare

Prepare阶段属于附加步骤,一般处理图像的解码和转码等操作。

Commit

commit阶段主要将图层进行打包,并将它们发送至Render Server。该过程会递归执行,因为图层和视图都是以树形结构存在。

动画渲染原理

iOS动画的渲染也是基于上述Core Animation流水线完成的。这里我们重点关注app与Render Server的执行流程。

日常开发中,如果不是特别的复杂动画,一般使用UIView Animation实现,iOS将其处理过程分为如下三部阶段:

image

参考博客 iOS图像渲染原理

上一篇 下一篇

猜你喜欢

热点阅读