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資源