通過深挖動畫處理流程中的各個環節， OpenHarmony 圖形棧解決了動畫受 UI 主線程影響而引發的卡頓問題，也解決了動畫過程中圖形計算負載高引起的耗時問題，提升了動畫性能。 ...
（以下內容來自開發者分享，不代表 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 圖形引擎、高階動效等能力，相信不久的未來會給大家帶來更多的驚喜，敬請期待~
