3 月 31 日，OpenAtom OpenHarmony（以下簡稱“OpenHarmony”） 3.1 Release 版本正式發(fā)布了。此版本為大家?guī)砹巳碌膱D形框架，實(shí)現(xiàn)了UI框架顯示、多窗口、流暢動(dòng)畫等基礎(chǔ)能力，夯實(shí)了 OpenHarmony 系統(tǒng)能力基座，下面就帶大家詳細(xì)了解新圖形框架。

一、完整能力視圖

新圖形框架的能力在持續(xù)構(gòu)建中，圖1展示了新圖形框架當(dāng)前及未來提供的完整能力視圖。

圖1 OpenHarmony圖形完整能力視圖

按照分層抽象和模塊化的架構(gòu)設(shè)計(jì)原則，新圖形框架分為接口層、框架層和引擎層。各層級說明如下：

●接口層：提供圖形 NDK（native development kit，原生開發(fā)包）能力，包括 OpenGL ES、Native Drawing 等繪制接口能力。

●框架層：由 Render Service、Animation、Effect、Drawing、顯示與內(nèi)存管理等核心模塊組成?？蚣軐痈髂K說明如下：

●引擎層：包括 2D 圖形庫和 3D 圖形引擎兩個(gè)模塊。2D 圖形庫提供 2D 圖形繪制底層 API，支持圖形繪制與文本繪制底層能力。3D 圖形引擎能力尚在構(gòu)建中。

二、新圖形框架的亮點(diǎn)

經(jīng)過上一節(jié)介紹，我們對新圖形框架的完整能力有了基本的了解。那么，新圖形框架有什么亮點(diǎn)呢？

新圖形框架在渲染、動(dòng)畫流暢性、接口方面重點(diǎn)發(fā)力：

（1）渲染方面

通常來講，UI 界面顯示分為兩個(gè)部分：一是描述的UI元素在應(yīng)用內(nèi)部顯示，二是多個(gè)應(yīng)用的界面在屏幕上同時(shí)顯示。對此，新圖形框架從功能上做了相應(yīng)的設(shè)計(jì)：控件級渲染和窗口級渲染。“控件級渲染”重點(diǎn)考慮如何跟UI框架前端進(jìn)行對接，需要將ArkUI框架的控件描述轉(zhuǎn)換成繪制指令，并提供對應(yīng)的節(jié)點(diǎn)管理以及渲染能力。而“窗口級渲染”重點(diǎn)考慮如何將多個(gè)應(yīng)用合成顯示到同一個(gè)屏幕上。

（2）動(dòng)畫流暢性方面

我們深挖動(dòng)畫處理流程中的各個(gè)環(huán)節(jié)，對新圖形框架進(jìn)行了新的動(dòng)畫實(shí)現(xiàn)設(shè)計(jì)，提升動(dòng)畫的流暢性體驗(yàn)。

（3）接口方面

新圖形框架在接口層提供了更豐富的接口能力。

下面為大家一一詳細(xì)介紹新圖形框架的亮點(diǎn)特性。

1. 控件級渲染

新圖形框架實(shí)現(xiàn)了基于 RenderService（簡稱 RS）的控件級渲染功能，如圖 2 所示。

圖2 控件級渲染

控件級渲染功能具有以下特點(diǎn)：

● 支持 GPU 渲染，提升渲染性能。

● 動(dòng)畫邏輯從主線程中剝離，提供獨(dú)立的步進(jìn)驅(qū)動(dòng)機(jī)制。

● 將渲染節(jié)點(diǎn)屬性化，屬性與內(nèi)容分離。

2. 窗口級渲染

新圖形框架實(shí)現(xiàn)了基于 RenderService 的窗口級渲染功能，如圖 3 所示。

圖3 窗口級渲染

窗口級渲染功能具有以下特點(diǎn)：

● 取代 Weston 合成框架，實(shí)現(xiàn)RS新合成框架。

● 支持硬件 VSync/軟件 Vsync。

● 支持基于 NativeWindow 接入 EGL/GLES 的能力。

● 更靈活的合成方式，支持硬件在線合成/CPU 合成/混合合成（GPU 合成即將上線）。

● 支持多媒體圖層在線 overlay。

3. 更流暢的動(dòng)畫體驗(yàn)

動(dòng)畫流暢性是一項(xiàng)很基本、也很關(guān)鍵的特性，直接影響用戶體驗(yàn)。為了提升動(dòng)畫的流暢性體驗(yàn)，我們深挖動(dòng)畫處理流程中的各個(gè)環(huán)節(jié)，對新圖形框架進(jìn)行了新的動(dòng)畫實(shí)現(xiàn)設(shè)計(jì)。

如圖 4 所示，傳統(tǒng)動(dòng)畫的實(shí)現(xiàn)流程如下：

（1） 應(yīng)用創(chuàng)建動(dòng)畫，設(shè)置動(dòng)畫參數(shù)；

（2） 每幀回調(diào)，修改控件參數(shù)，重新測量、布局、繪制；

（3） 內(nèi)容渲染。

圖4 傳統(tǒng)動(dòng)畫實(shí)現(xiàn)

經(jīng)過深入分析，我們發(fā)現(xiàn)傳統(tǒng)動(dòng)畫實(shí)現(xiàn)存在以下缺點(diǎn)：

（1）UI 與動(dòng)畫一起執(zhí)行，UI 的業(yè)務(wù)阻塞會影響動(dòng)畫的執(zhí)行，導(dǎo)致動(dòng)畫卡頓。

（2）每幀回調(diào)修改控件屬性，會觸發(fā)測量布局錄制，導(dǎo)致耗時(shí)增加。

針對以上兩點(diǎn)缺陷，我們對新圖形框架進(jìn)行了新的動(dòng)畫實(shí)現(xiàn)設(shè)計(jì)，如圖5所示。

圖5 新框架的動(dòng)畫實(shí)現(xiàn)

（1）動(dòng)畫與 UI 分離。

動(dòng)畫在渲染線程步進(jìn)，與 UI 業(yè)務(wù)線程分離。

（2）動(dòng)畫僅測量、布局、繪制一次，降低動(dòng)畫負(fù)載。

通過計(jì)算最終界面屬性值，對有改變的控件添加動(dòng)畫，動(dòng)畫過程中不測量、布局、繪制，提升性能。

4. 對外提供的接口

新圖形框架提供了豐富的接口：

（1）SDK：支持 WebGL 1.0、WebGL 2.0，滿足 JS 開發(fā)者的 3D 開發(fā)的需求。

WebGL 開發(fā)指導(dǎo)

https://docs.openharmony.cn/pages/v3.1/zh-cn/OpenHarmony-Overview_zh.md/

（2）NDK：支持 OpenGL ES3.X，可以通過 XComponent 提供的 nativewindow 創(chuàng)建 EGL/OPENGL 繪制環(huán)境，滿足游戲引擎等開發(fā)者對 3D 繪圖能力的需求。

圖6 OpenGL ES使用示例

新圖形框架還處于不斷完善過程中，我們將基于新框架提供更多的能力，相信以后會給大家?guī)砀嗟捏@喜，敬請期待~

審核編輯 ：李倩