Advanced Graphics and Animations for iOS Apps

主题:

  1. Core Animation pipeline
  2. 动画
  3. 渲染相关概念
  4. UIBlurEffect and UIVibrancyEffect
  5. Profiling Tools and demon

一、Core Animation pipeline

app 直接使用 core Animation 或者通过 UIKit 间接使用 core Animation 来创建图层;

app 进程不为 Core Animation 提供渲染工作,Core Animation 会将所有的图层提交到 render server 来完成渲染工作。

render server

  1. 独立的进程;
  2. 具有一个 Core Animatio 对应的服务端版本,专门接收 Core Animation 提交的图层;
  3. 使用 GPU进行渲染,硬件加速;
  4. 对应框架为 OpenGL 或者 metal 框架进行渲染,

硬件加速即指 GPU 渲染。因为一般而言,CPU 虽然也是硬件,但是工作内容大部分是面向软件层面,需要处理很多中断指令。相对而言,GPU 工作内容是纯计算,其设计上也是为了高并发和高效率的计算,所以 GPU 渲染一般称为硬件加速,使用 CPU 渲染则效率相对低下;

大概流程

app:

  1. 用户通过操作 app 触发事件;
  2. 事务提交到 render server(具体分为4步,见后文);

render server/GPU

  1. 解码图层;
  2. 等待下一帧开始的信号。iOS 上是双缓冲机制,所以这个信号表示上一个 buffer 已经扫描展示,显示器已经切换到了另一个 buffer。当下,需要绘制新的位图并更新到上一帧所在的 buffer 上;
  3. 调用 openGL 或者 metal 函数,利用 GPU 进行绘制渲染;
  4. 将绘制完成的位图存储到 buffer 中,等待显示器扫描展示,这个步骤和上个步骤如果未在 16.67ms 内完成,则会造成卡顿;


    coreAnimation pipline

commit transaction

1. layout

两个关键方法:layoutSubviewsaddSubview;这一步中,view 被创建,layer 被创建并被添加到视图树中;这一步中,可以做一些轻量的数据库操作,比如 label 的布局需要字符串;

这一步发生在 CPU,一般都是 CPU 操作或者 I/O 操作(外存);

2. display

关键方法:drawRect;如果这个方法被重写了,那么就会调用 Core Graphic 来利用 CPU 进行绘制。

因为此时的绘制时不可见的,所以这里使用的 CPU 在内存中进行位图的绘制;这里严格来说,可以说成是离屏渲染,因为不是直接绘制在 buffer 上的。

GPU 的绘制一般都是直接绘制在 buffer 上,GPU 的离屏渲染大概是开辟一块内存进行渲染操作,最后将两块内存混合,在两块内存之间进行切换会消耗性能。 Apple 对于离屏渲染的界定其实就是 GPU 离屏渲染,所以 CG 相关的绘制函数不被认定为时离屏渲染;

这一步一般是 CPU 操作或者 memory(内存) 操作,因为是使用 CPU 绘制位图,需要使用到内存,而不是本地化存取;

这一步是适用 CPU 渲染,所以应当尽量避免过多或者范围过大的绘制,最好直接使用 layer,因为 Layer 实际就是一个指向 bitmap 的指针,而且 layer 是通过 core Animation 实现,而不是 core Graphic,其会尽可能将渲染操作提交到 GPU 上执行,这也就是 Apple 所说的硬件加速;

上面已经解释,但是再啰嗦几句。硬件软件只是一种说法,CPU 处理的事物更多的是来自软件,所以常说 CPU 面向的是软件层面,而 GPU 的操作基本都是全量利用 GPU 的计算能力来进行渲染,不会处理各种中断、if 判断等,所以常说 GPU 面向硬件。

3. prepare

这一步主要是对图层中所包含的图片进行解码和转换。

解码就是我们常说的将图片解码成 bitmap 格式存储在内存中。bitmap 的大小是否和原图相同,取决于图片的格式,也就是压缩方式,PNG 是保真类型的图片,压缩之后的图片存储大小会变现,但是在这一步,会被加载到内存,解码之后的 bitmap 和原图大小一致;JPEG 则是对 bitmap 中相邻的点进行了裁剪等操作,压缩之后不仅存储大小变小,被加载到内存中,还原成 bitmap 之后,因为原图的信息部分丢失,所以解码之后的 bitmap 大小会比原 bitmap 要小;

iOS 的 GPU 支持 JPEG 和 PNG,其他格式需要进行转换;

4. package up

关键词:recursive

递归图层树,打包所有 layer 信息,传递给 render server;

正因为要递归 layer tree,所以布局时尽量减少视图层级(as flat as possible)能够保证这一步尽量的高效快速;

animation

animation

步骤和图层绘制一样,唯一不同的是在 commit 阶段,不仅提交图层,还提交了动画。这样在动画执行过程中,render server 按照既定的流程执行动画,不需要在进程之间进行通信了。这也是 core Animation 动画高效的原因;


以下暂时没看到,暂略

渲染的几个概念

  1. tile based rendering is how all GPUs work
  2. introduce the concept of render passes
  3. doing a first example by showing you how masking works with render passes

UIBlurEffect 和 UIVibrancyEffect 原理

项目中的 toast 有用到,需要好好总结下;

instrument

这种使用的东西,比较不好说,要自己体会,略;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260