（以下內容來自開發者分享，不代表 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 主執行緒業務阻塞的場景，可以看到影片明顯卡頓了，
2. 影片程序圖形計算負載高
傳統的影片處理流程如圖 2 所示，開發者在應用代碼中創建影片、設定影片引數、設定每幀回呼等，從而實作想要的影片效果，應用運行時，系統會對影片一幀一幀地渲染，首先，在影片階段，系統會計算被修改的控制元件的屬性值，接著，進入測量/布局/繪制階段，系統測量所有控制元件的屬性，根據設備尺寸對所有控制元件進行布局，并形成繪制指令，最后由 GPU 進行每一幀的渲染，
圖 2 傳統的影片處理流程
在測量/布局/繪制階段，如果控制元件屬性發生變化（如圖 3），則每一幀都要重新測量、布局和繪制，這意味著每一幀都會引入圖形計算負載，增加了耗時，且最終影響影片效果，
圖 3 圖形計算負載
下面我們來看一個示例：
以上示例中，點擊 Title 后，表單根據設備尺寸進行伸展，這個程序其實就是控制元件屬性發生變化的程序，我們看到影片效果不流暢，是因為測量、布局繪制環節耗時長導致，
為了解決上面兩個影響影片流暢的關鍵問題，OpenHarmony 圖形堆疊采取了 UI 與影片分離、測量布局繪制優化等關鍵技術來提升影片性能，
1. UI 與影片分離
OpenHarmony 圖形堆疊采用 UI 與影片分離的設計思想，影片的使能和引數下發在 UI 主執行緒，影片的步進在渲染程序中，在這種分離的方式下，影片不再受 UI 主執行緒阻塞的影響，從架構上避免了因 UI 主執行緒阻塞導致影片卡頓的問題，
下面我們再次通過上面的 Demo 來模擬 UI 主執行緒業務阻塞，這次我們看到影片非常流暢，絲毫沒有受到 UI 主執行緒業務阻塞的影響，
2. 測量布局繪制優化
傳統的影片程序中，寬高的變化必然引起布局的變化，從而導致每幀進行重新測量、布局和繪制，當控制元件數量過多的時候，因測量、布局、繪制所帶來的 CPU 負載是非常高的，為此，對于布局中內容不變的場景，OpenHarmony 圖形堆疊對測量布局計算進行優化，影片程序中由系統進行動態的“插幀”處理，從而有效地避免了每幀的重新測量、布局和繪制，
下面我們看看同樣的示例在 OpenHarmony 中的影片效果：
可以看到，在 OpenHarmony 中此示例的影片效果非常流暢，
三、自然地提升影片銜接
對于單段影片而言，影片的流暢性是用戶體驗的一個重要指標，很多情況下，開發者還會面臨多段影片的銜接處理，這時影片銜接是否自然，也是用戶體驗的一個重要指標，
比如，圖 4 展示了兩種傳統的影片銜接處理方式，能很明顯地看到影片銜接得不自然，
圖 4 影片銜接不自然
OpenHarmony 圖形堆疊為開發者們提供了便利且自然的影片銜接實作方式，當出現影片中斷時，開發者只需要指定新的終點即可，系統會以一種自然的方式進行影片銜接，這樣既降低了開發者的負擔，又可以得到很好的影片體驗，圖 5 展示了 OpenHarmony 圖形堆疊的影片銜接效果，
圖 5 OpenHarmony 影片銜接效果
四、豐富動效
隨著應用蓬勃發展，多任務、多視窗越來越普遍，給動效呈現帶來了很大挑戰，比如下面的視頻，長按應用圖示，桌面和壁紙產生模糊效果，由于桌面和壁紙是獨立繪制、分離渲染的，要想實作動態實時模糊，需要在合成階段進行模糊處理（GPU 合成方式），導致性能和功耗的代價高，用靜態模糊的效果是一種比較“經濟”的做法，
OpenHarmony 圖形堆疊采用統一繪制與渲染機制，以上示例在 OpenHarmony 圖形堆疊的繪制與渲染流程如圖 6 所示，
圖 6 繪制與渲染流程
解決了跨視窗聯動問題后，上面示例中桌面和壁紙模糊效果呈現時，也能同步看到壁紙的動效，如下：
此外，OpenHarmony 圖形堆疊從時間和空間上提供了更豐富的動效能力，空間維度上，更容易實作空間相關的動效，時間維度上，開發者只需設定終止界面，圖形堆疊自動進行插值計算，簡化復雜的計算，
圖 7 時間和空間聯合動效
五、結束語
通過深挖影片處理流程中的各個環節， OpenHarmony 圖形堆疊解決了影片受 UI 主執行緒影響而引發的卡頓問題，也解決了影片程序中圖形計算負載高引起的耗時問題，提升了影片性能，此外，OpenHarmony 圖形堆疊提供的時間和空間聯合動效能力，讓動效開發變得更簡單，提升了開發效率，
OpenHarmony 圖形堆疊能力還在不斷完善中，將繼續完善統一渲染、3D 圖形引擎、高階動效等能力，相信不久的未來會給大家帶來更多的驚喜，敬請期待~
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/458165.html
標籤：其他