作者：李煜 华为技术有限公司 崔坤 华为技术有限公司
家喻户晓，动画是零碎和利用与用户交互的重要环节。动画成果的好坏会间接影响用户的体验。动画成果依赖图形系统，华为作为 OpenAtom OpenHarmony（以下简称“OpenHarmony”）开源我的项目贡献者，自主研发了一套以对立渲染为根底、高性能动效引擎为驱动的图形系统——OpenHarmony 图形栈。
一、OpenHarmony 图形栈介绍
上面先为大家介绍一下 OpenHarmony 图形栈的架构。
依照分层形象和轻模块化的架构设计准则，OpenHarmony 图形栈分为接口层、架构层和引擎层，且每一层按能力分成了若干个能力模块。OpenHarmony 图形栈的残缺能力视图如图 1 所示。（目前，视图中的能力尚未全副实现，还在继续开发和欠缺中。）
图 1 OpenHarmony 图形栈
对上，OpenHarmony 图形栈为应用程序框架提供高性能、易用的图形接口，撑持多窗口、简单页面的图形渲染和晦涩天然动画的实现。对下，OpenHarmony 图形栈屏蔽差异化的芯片平台，撑持任意合乎 OpenHarmony 图形规范的设施接入。
OpenHarmony 图形栈的分层阐明如下：
• 接口层：提供图形的 NDK（native development kit，原生开发包）能力，包含：WebGL、Native core Canvas 的绘制能力、OpenGL 指令级的绘制能力撑持等。
• 框架层：分为 Render Service、Drawing、Animation、Effect、显示与内存治理五个模块。
• 引擎层：包含 2D 图形库和 3D 图形引擎两个模块。2D 图形库提供 2D 图形绘制底层 API，反对图形绘制与文本绘制底层能力。3D 图形引擎能力尚在构建中。
看了下面 OpenHarmony 图形栈的介绍，你兴许还没有 get 到 OpenHarmony 图形栈到底能为用户带来哪些更好的体验。别急，上面就为大家一一道来。
二、晋升动画晦涩度
从艰深角度看，动画是多张间断的画面通过肯定的帧率展现进去。用户大部分工夫是处在人机交互的动画场景中，比方浏览新闻页面等，动画的流畅性对用户体验十分要害。咱们通过对传统动画解决流程的深入分析，发现了影响动画晦涩的两个关键问题：
- 动画受 UI 主线程影响
如果 UI 主线程的业务阻塞，这很容易引发动画卡顿的景象，给用户带来不好的体验。上面的 Demo 模仿了 UI 主线程业务阻塞的场景，能够看到动画显著卡顿了。
- 动画过程图形计算负载高
传统的动画解决流程如图 2 所示。开发者在利用代码中创立动画、设置动画参数、设置每帧回调等，从而实现想要的动画成果。利用运行时，零碎会对动画一帧一帧地渲染。首先，在动画阶段，零碎会计算被批改的控件的属性值。接着，进入测量 / 布局 / 绘制阶段，零碎测量所有控件的属性，依据设施尺寸对所有控件进行布局，并造成绘制指令。最初由 GPU 进行每一帧的渲染。
图 2 传统的动画解决流程
在测量 / 布局 / 绘制阶段，如果控件属性发生变化（如图 3），则每一帧都要从新测量、布局和绘制。这意味着每一帧都会引入图形计算负载，减少了耗时，且最终影响动画成果。
图 3 图形计算负载
上面咱们来看一个示例：
以上示例中，点击 Title 后，窗体依据设施尺寸进行舒展。这个过程其实就是控件属性发生变化的过程，咱们看到动画成果不晦涩，是因为测量、布局绘制环节耗时长导致。
为了解决下面两个影响动画晦涩的关键问题，OpenHarmony 图形栈采取了 UI 与动画拆散、测量布局绘制优化等关键技术来晋升动画性能。
- UI 与动画拆散
OpenHarmony 图形栈采纳 UI 与动画拆散的设计思维，动画的使能和参数下发在 UI 主线程，动画的步进在渲染过程中。在这种拆散的形式下，动画不再受 UI 主线程阻塞的影响，从架构上防止了因 UI 主线程阻塞导致动画卡顿的问题。
上面咱们再次通过下面的 Demo 来模仿 UI 主线程业务阻塞。这次咱们看到动画十分晦涩，丝毫没有受到 UI 主线程业务阻塞的影响。
- 测量布局绘制优化
传统的动画过程中，宽高的变动必然引起布局的变动，从而导致每帧进行从新测量、布局和绘制。当控件数量过多的时候，因测量、布局、绘制所带来的 CPU 负载是十分高的。为此，对于布局中内容不变的场景，OpenHarmony 图形栈对测量布局计算进行优化，动画过程中由零碎进行动静的“插帧”解决，从而无效地防止了每帧的从新测量、布局和绘制。
上面咱们看看同样的示例在 OpenHarmony 中的动画成果：
能够看到，在 OpenHarmony 中此示例的动画成果十分晦涩。
三、天然地晋升动画连接
对于单段动画而言，动画的流畅性是用户体验的一个重要指标。很多状况下，开发者还会面临多段动画的连接解决，这时动画连接是否天然，也是用户体验的一个重要指标。
比方，图 4 展现了两种传统的动画连接解决形式，能很显著地看到动画连接得不天然。
图 4 动画连接不天然
OpenHarmony 图形栈为开发者们提供了便当且天然的动画连接实现形式。当呈现动画中断时，开发者只须要指定新的起点即可，零碎会以一种天然的形式进行动画连接。这样既升高了开发者的累赘，又能够失去很好的动画体验。图 5 展现了 OpenHarmony 图形栈的动画连接成果。
图 5 OpenHarmony 动画连接成果
四、丰盛动效
随着利用蓬勃发展，多任务、多窗口越来越广泛，给动效出现带来了很大挑战。比方上面的视频，长按利用图标，桌面和壁纸产生含糊成果。因为桌面和壁纸是独立绘制、拆散渲染的，要想实现动静实时含糊，须要在合成阶段进行含糊解决（GPU 合成形式），导致性能和功耗的代价高，用动态含糊的成果是一种比拟“经济”的做法。
OpenHarmony 图形栈采纳对立绘制与渲染机制。以上示例在 OpenHarmony 图形栈的绘制与渲染流程如图 6 所示。
图 6 绘制与渲染流程
解决了跨窗口联动问题后，下面示例中桌面和壁纸含糊成果出现时，也能同步看到壁纸的动效，如下：
此外，OpenHarmony 图形栈从工夫和空间上提供了更丰盛的动效能力。空间维度上，更容易实现空间相干的动效。工夫维度上，开发者只需设置终止界面，图形栈主动进行插值计算，简化简单的计算。
图 7 工夫和空间联结动效
五、结束语
通过深挖动画解决流程中的各个环节，OpenHarmony 图形栈解决了动画受 UI 主线程影响而引发的卡顿问题，也解决了动画过程中图形计算负载高引起的耗时问题，晋升了动画性能。此外，OpenHarmony 图形栈提供的工夫和空间联结动效能力，让动效开发变得更简略，晋升了开发效率。
OpenHarmony 图形栈能力还在不断完善中，将持续欠缺对立渲染、3D 图形引擎、高阶动效等能力，置信不久的将来会给大家带来更多的惊喜，敬请期待~