乐趣区

关于harmonyos:OpenHarmony-31-Beta-版本关键特性解析OpenHarmony-图形框架

作者:李煜 华为技术有限公司 崔坤 华为技术有限公司
家喻户晓,动画是零碎和利用与用户交互的重要环节。动画成果的好坏会间接影响用户的体验。动画成果依赖图形系统,华为作为 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 图形栈到底能为用户带来哪些更好的体验。别急,上面就为大家一一道来。

二、晋升动画晦涩度

从艰深角度看,动画是多张间断的画面通过肯定的帧率展现进去。用户大部分工夫是处在人机交互的动画场景中,比方浏览新闻页面等,动画的流畅性对用户体验十分要害。咱们通过对传统动画解决流程的深入分析,发现了影响动画晦涩的两个关键问题:

  1. 动画受 UI 主线程影响

如果 UI 主线程的业务阻塞,这很容易引发动画卡顿的景象,给用户带来不好的体验。上面的 Demo 模仿了 UI 主线程业务阻塞的场景,能够看到动画显著卡顿了。

  1. 动画过程图形计算负载高

传统的动画解决流程如图 2 所示。开发者在利用代码中创立动画、设置动画参数、设置每帧回调等,从而实现想要的动画成果。利用运行时,零碎会对动画一帧一帧地渲染。首先,在动画阶段,零碎会计算被批改的控件的属性值。接着,进入测量 / 布局 / 绘制阶段,零碎测量所有控件的属性,依据设施尺寸对所有控件进行布局,并造成绘制指令。最初由 GPU 进行每一帧的渲染。

图 2 传统的动画解决流程

在测量 / 布局 / 绘制阶段,如果控件属性发生变化(如图 3),则每一帧都要从新测量、布局和绘制。这意味着每一帧都会引入图形计算负载,减少了耗时,且最终影响动画成果。

图 3 图形计算负载

上面咱们来看一个示例:

以上示例中,点击 Title 后,窗体依据设施尺寸进行舒展。这个过程其实就是控件属性发生变化的过程,咱们看到动画成果不晦涩,是因为测量、布局绘制环节耗时长导致。

为了解决下面两个影响动画晦涩的关键问题,OpenHarmony 图形栈采取了 UI 与动画拆散、测量布局绘制优化等关键技术来晋升动画性能。

  1. UI 与动画拆散

OpenHarmony 图形栈采纳 UI 与动画拆散的设计思维,动画的使能和参数下发在 UI 主线程,动画的步进在渲染过程中。在这种拆散的形式下,动画不再受 UI 主线程阻塞的影响,从架构上防止了因 UI 主线程阻塞导致动画卡顿的问题。

上面咱们再次通过下面的 Demo 来模仿 UI 主线程业务阻塞。这次咱们看到动画十分晦涩,丝毫没有受到 UI 主线程业务阻塞的影响。

  1. 测量布局绘制优化

传统的动画过程中,宽高的变动必然引起布局的变动,从而导致每帧进行从新测量、布局和绘制。当控件数量过多的时候,因测量、布局、绘制所带来的 CPU 负载是十分高的。为此,对于布局中内容不变的场景,OpenHarmony 图形栈对测量布局计算进行优化,动画过程中由零碎进行动静的“插帧”解决,从而无效地防止了每帧的从新测量、布局和绘制。

上面咱们看看同样的示例在 OpenHarmony 中的动画成果:

能够看到,在 OpenHarmony 中此示例的动画成果十分晦涩。

三、天然地晋升动画连接
对于单段动画而言,动画的流畅性是用户体验的一个重要指标。很多状况下,开发者还会面临多段动画的连接解决,这时动画连接是否天然,也是用户体验的一个重要指标。

比方,图 4 展现了两种传统的动画连接解决形式,能很显著地看到动画连接得不天然。

图 4 动画连接不天然

OpenHarmony 图形栈为开发者们提供了便当且天然的动画连接实现形式。当呈现动画中断时,开发者只须要指定新的起点即可,零碎会以一种天然的形式进行动画连接。这样既升高了开发者的累赘,又能够失去很好的动画体验。图 5 展现了 OpenHarmony 图形栈的动画连接成果。

图 5 OpenHarmony 动画连接成果

四、丰盛动效
随着利用蓬勃发展,多任务、多窗口越来越广泛,给动效出现带来了很大挑战。比方上面的视频,长按利用图标,桌面和壁纸产生含糊成果。因为桌面和壁纸是独立绘制、拆散渲染的,要想实现动静实时含糊,须要在合成阶段进行含糊解决(GPU 合成形式),导致性能和功耗的代价高,用动态含糊的成果是一种比拟“经济”的做法。

OpenHarmony 图形栈采纳对立绘制与渲染机制。以上示例在 OpenHarmony 图形栈的绘制与渲染流程如图 6 所示。

图 6 绘制与渲染流程

解决了跨窗口联动问题后,下面示例中桌面和壁纸含糊成果出现时,也能同步看到壁纸的动效,如下:

此外,OpenHarmony 图形栈从工夫和空间上提供了更丰盛的动效能力。空间维度上,更容易实现空间相干的动效。工夫维度上,开发者只需设置终止界面,图形栈主动进行插值计算,简化简单的计算。

图 7 工夫和空间联结动效

五、结束语
通过深挖动画解决流程中的各个环节,OpenHarmony 图形栈解决了动画受 UI 主线程影响而引发的卡顿问题,也解决了动画过程中图形计算负载高引起的耗时问题,晋升了动画性能。此外,OpenHarmony 图形栈提供的工夫和空间联结动效能力,让动效开发变得更简略,晋升了开发效率。

OpenHarmony 图形栈能力还在不断完善中,将持续欠缺对立渲染、3D 图形引擎、高阶动效等能力,置信不久的将来会给大家带来更多的惊喜,敬请期待~

退出移动版