YYEVA動效播放器--動態元素完美呈現新方案

語言: CN / TW / HK

時間 2022-09-27 20:02:14 百度Geek說

作者 | 龍捲風

導讀：伴隨著計算機視覺領域的發展，動畫也變得越來越炫酷。各種動效解決方案在畫質提升時，也要兼顧檔案體積和效能。透明MP4方案，能讓設計師製作動畫所見即所得，充分發揮了設計師的想象力和創造力。百度YYEVA動效播放器是基於透明MP4的基礎，自研的一套輕量級、高效能、跨平臺的動效方案，支援插入動態元素，提供完善的工具鏈，一站式解決從設計側的資源匯出、線上預覽，到客戶端渲染SDK。

全文3736字，預計閱讀時間10分鐘。

01 YYEVA介紹

YYEVA實現了一整套完整的工具鏈，包括：資源輸出端的AE外掛、線上預覽工具、客戶端渲染SDK, 實現了透明MP4資源，可插入動態的業務元素等功能。

YYEVA是一個輕量級、高效能、跨平臺、動態的MP4資源解決方案
YYEVA包含一套從設計工具AE外掛、線上預覽工具、客戶端渲染SDK的完整工具鏈
基於仿射矩陣運算，得到圖層每一幀的位置資訊
集成了MP4（avc/hevc）封裝協議等相關功能
高度可擴充套件性，可還原設計師的全部細節
支援 Web、Android、iOS等

YYEVA目前已經在多個專案中使用，其中YY、貼吧、百度、好看等多個場景使用YYEVA實現複雜的動效效果，還提供給外部公司的專案組使用

案例Demo視訊可點選連結檢視：http://mp.weixin.qq.com/s/bXgauBqtwUlT8IRXPLr45w

開源專案地址：http://github.com/yylive/yyeva

YYEVA官網：http://yyeva.netlify.app/

02 YYEVA探索之路

2.1 動畫的集中實現方案

1.面向結果的記錄方式

該方式是通過記錄動畫每一幀的影象，播放時根據影象的RGBA，還原出動畫效果。且只記錄了最終結果，還原不出設計的動畫元素，所以難以去修改動畫元素，插入元素也比較複雜

優點：

所見即所得，可還原所有設計效果；不用再針對具體特效進行開發支援；元素個數和運動複雜度對播放效能影響小

缺點：

檔案體積較大；不易支援動態插入或替換元素

2.面向過程的記錄方式

該方式是通過記錄動畫創作過程，在播放端，根據過程計算各元素運動軌跡，還原效果；還原動畫需要實時計算，越複雜的動畫計算量越大，比如濾鏡和貝塞爾曲線相關的計算非常消耗效能。

優點：

體積較小，可以隨意拉伸不影響質量；方便動態插入元素

缺點：

效能差，耗CPU和GPU；對複雜動畫支援差，越複雜動畫越容易卡頓

對比以上2種動畫的實現原理，為了達到所見即所得的效果，充分發揮設計師的想象力，YYEVA採用的是面向結果的動畫方式---透明MP4方案

相比序列幀方案，透明MP4具有更高的壓縮率的優點，從而解決檔案體積大的問題。我們開發了一套YYEVA工具鏈，支援動態插入或替換元素

2.2 視訊動畫

以H264編碼，MPEG-4的顏色取樣標準是YUV，YUV是亮度和色度的分量疊加，不支援alpha通道，因此，如何讓MP4視訊支援透明度，業界常用的方式是使用兩個通道分別進行儲存視訊的RGB資料和Alpha資料。由於視訊動畫所見即所得，支援更多複雜特效等優點，目前廣泛應用在YY各個場景中，成為了YY動效播放的首選方案。

如動畫解析度為500x500，則Mp4的解析度為1000x500，其中左邊500x500為RGB資料，右邊500x500為Alpha資料。Player組合成RGBA紋理再進行渲染顯示。

2.3 混合MP4動效

在MP4動效裡，新增一些如暱稱，頭像，圖片等業務元素，常用的做法是在MP4播放的時候，再疊加一個原生的View,或者使用 MP4 + SVGA/Y2A的方式來實現。這樣往往存在資源下載、同步播放、維護多套資源等問題。

2.4 YYEVA方案

將視訊幀和描述資訊合到一個MP4資源，同步渲染，解決了資源下載、同步播放、維護多套資源的問題。

YYEVA的Json描述資訊如下所示：

descript: 解析度、外掛版本、rgb區域位置、alpha區域位
effect: 型別、key
datas: renderFrame、outputFrame

1、YYEVA描述動態元素

描述一個動畫的幾大要素：時間、位置、形變

時間:通過Json的frameIndex描述需要出現的幀索引
位置:通過Json的RenderFrame描述元素在畫布上的位置和大小
形變:通過Json的OutputFrame獲取元素形變的遮罩

2、遮罩mask的演示

形狀可以通過2種方式來記錄

記錄圖形的形狀描述
將圖形完整儲存下來

03 YYEVA實現方案

YYEVA框架圖如下：

工具鏈的流程圖如下：

3.1 YYEVA外掛

YYEVA解決方案通過在AE上開發的一個擴充套件程式，解析設計師按規範製作好的相關圖層資訊，通過YYConveterMP4外掛的圖層解析模組、h264模組、資源合成模組，匯出一個YYEVA的資源。

1、圖層解析模組

規範性檢測
所選合成是否包含透明區域圖層：目前外掛處理的資源是基於YY透明MP4資源，所以源素材必須是一個透明MP4資源。即 RGB/Alpha左右分離的
所選合成是否包含Mask遮罩區域：文字遮罩區域是以 mask_text 作為合成的name；圖片遮罩區域是以mask_image作為合成的name
是否包含YYConverterMP4模板，該模板是用於下面的H264模組轉換MP4使用的
圖層處理
計算仿射矩陣：Matrix
計算Mask位置：RenderFrame
提取 Mask （遮罩）合成
計算 Mask合成下所有圖層每一幀的RenderFrame
Copy一份輸出合成，並縮小 Alpha 區域0.5倍後調整位置，同時分為三個部分：rgb 、 alpha 、 mask
將所有的有效遮罩圖層 Copy 到輸出合成，並調整到mask區域，計算OutputFrame
調整輸出合成的區域大小
將上面計算的RenderFrame 、 OutputFrame 組合成一個 Json 資料
拷貝合成

將制定的輸出合成拷貝一份後，並縮小alpha區域0.5倍後調整位置，同時分為三個部分：rgb 、 alpha 、 mask。

2、H264模組

在AE上建立一個指定的YYConverterMP4模板，統一渲染佇列輸出成avi格式
在外掛內部整合ffmpeg命令列工具，通過child_process，來調起命令列工具，其中 MAC/Windows使用的ffmpeg可執行檔案不同（.app和.exe檔案）
使用ffmpeg轉換的時候，通過封裝三種檔位的CRF引數，統一輸出的畫質和體積
通過選擇不同的編碼器來實現，來輸出H264/H265資源