作者 | 龍卷風
導讀：伴随着計算機視覺領域的發展，動畫也變得越來越炫酷。各種動效解決方案在畫質提升時，也要兼顧檔案體積和性能。透明MP4方案，能讓設計師制作動畫所見即所得，充分發揮了設計師的想象力和創造力。百度YYEVA動效播放器是基于透明MP4的基礎，自研的一套輕量級、高性能、跨平台的動效方案，支援插入動态元素，提供完善的工具鍊，一站式解決從設計側的資源導出、線上預覽，到用戶端渲染SDK。
全文3736字，預計閱讀時間10分鐘。
01 YYEVA介紹
YYEVA 通過實作一整套完整的工具鍊，支援在MP4資源中插入動态的業務元素等功能，基于AE實作的插件子產品，可還原AE的大部分特性。 工具鍊包括：資源輸出端的 AE 插件、線上預覽工具、用戶端渲染 SDK,。
- YYEVA實作了YYEVA 是一個 輕量級、高性能、跨平台、動态的 MP4 資源解決方案
- YYEVA 包含一套從設計工具 AE 插件、線上預覽工具、用戶端渲染 SDK 的完整工具鍊
- 基于仿射矩陣運算，得到圖層每一幀的位置資訊
- 內建了 MP4（avc/hevc）封裝協定等相關功能
- 高度可擴充性，可還原設計師的全部細節
- 支援 Web、Android、iOS、小程式
YYEVA 目前已經在多個項目中接入，其中 YY、貼吧、百度、好看等多個場景使用 YYEVA 實作複雜炫酷的動效效果， 還提供給外部公司的項目組使用。
歡迎大家加入YYEVA-Q群: 981738110，及時知曉YYEVA新功能釋出，還可以和群内的YYEVA大神直接交流。
請大家多多支援我們，點上一個寶貴的Star
- 開源項目位址：https://github.com/yylive/yyeva
YYEVA落地的成功案例
這是一個可以動态插入文字、圖檔的MP4資源；其中的圖檔可以根據場景動态替換，文字的文案和顔色也可以動态替換。
該案例的YYEVA源視訊：
02 YYEVA探索之路
1. 動畫的幾種實作方案
面向結果的記錄方式
該方式是通過記錄動畫每一幀的圖像，播放時根據圖像的像素值還原出動畫效果。且隻記錄了最終結果，還原不出設計的動畫元素，是以難以修改動畫元素，實作插入元素比較複雜。
- 優點：所見即所得，可還原所有設計效果；不用再針對具體特效進行開發支援；元素個數和運動複雜度對播放性能影響小
- 缺點：檔案體積較大；不易支援動态插入或替換元素
面向過程的記錄方式
該方式是通過記錄動畫創作過程，在播放端，根據過程計算各元素運動軌迹，還原效果；還原動畫需要實時計算，越複雜的動畫計算量越大，比如濾鏡和貝塞爾曲線相關的計算非常消耗性能。
- 優點：體積較小，可以随意拉伸不影響品質；友善動态插入元素
- 缺點：性能差，耗 CPU 和 GPU；對複雜動畫支援差，越複雜動畫越容易卡頓
對比以上 2 種動畫的實作原理，為了達到所見即所得的效果，充分發揮設計師的想象力，YYEVA 采用的是面向結果的動畫方式 --- 透明 MP4 方案；相比序列幀方案，透明 MP4 具有更高的壓縮率的優點，進而解決檔案體積大的問題。我們開發了一套 YYEVA 工具鍊，支援動态插入或替換元素。
2.視訊動畫
H264 編碼使用的MPEG-4協定，其顔色采樣标準是 YUV。YUV 是亮度和色度的分量疊加，不支援 alpha 通道，是以，如何讓 MP4 視訊支援透明度，業界常用的方式是使用兩個通道分别進行 存儲視訊的 RGB 資料和 Alpha 資料。由于視訊動畫所見即所得，支援更多複雜特效等優點，目前廣泛應用在 YY 各個場景中，成為了 YY 動效播放的首選方案。
如動畫分辨率為 500x500， 則 Mp4 的分辨率為 1000x500， 其中左邊 500x500 為 RGB 資料， 右邊 500x500 為 Alpha 資料。Player 組合成 RGBA 紋理再進行渲染顯示。
3.MP4混合動效
在 MP4 動效裡，添加一些如昵稱，頭像，圖檔等業務元素，常用的做法是在 MP4 播放的時候，再疊加一個原生的 View, 或者使用 MP4+SVGA的方案來實作，如下圖所示。該方案存在維護多套資源、 同步播放等問題。
4. YYEVA方案
YYEVA采用的是面向結果的動畫方式 --- 透明 MP4 方案，将視訊幀和描述資訊合到一個 MP4 資源，同步渲染， 解決了維護多套資源、同步播放的問題。
其中，Json描述資訊描述了：
- 視訊基本資訊： 分辨率、插件版本、RGB位置、Alpha位置
- 動态元素基本資訊： 動态元素類型、動态元素索引的Key
- 動态元素每一幀位置資訊： 輸出視訊的位置、畫布上的位置
Json的描述資訊請點選連結具體檢視分析
03. YYEVA實作方案
YYEVA架構圖如下圖所示
YYEVA包含了2個核心部分：
- AE插件 ： 負責解析設計師制作的動畫圖層，輸出一個YYEVA資源
- 用戶端渲染SDK ： 負責解析YYEVA資源，根據業務傳入的動态文字、圖檔，渲染到畫布上
YYEVA的工具鍊如下圖所示：
3.1 YYEVA插件
YYEVA通過在 AE 上開發的一個擴充程式，解析設計師按規範制作好的相關圖層資訊，通過YYConveterMP4插件的圖層解析子產品、h264 子產品、資源合成子產品，導出一個 YYEVA 的資源。
3.2 YYEVA渲染SDK
用戶端在讀取到一個 YYEVA 資源後，會通過如下渲染流程：
- 使用資源解析子產品，将MP4的 Metadata 段的 Json 資料解析出來
- 然後通過元素解析子產品，将動态 Json 資料模态化成相應的對象。
- 通過音視訊子產品，将 MP4 資源的音視訊軌解碼
- 通過渲染子產品，将視訊軌 + Mask 動态元素分别渲染到螢幕上
用戶端SDK渲染流程
用戶端SDK渲染用戶端實作邏輯
如果有多個動态元素，在一個渲染周期，會把所有的動态元素按照YYEVA插件儲存的資訊和資料，渲染一次。
其中
RGB+Alpha的混合流程如下：
Mask的混合流程如下：
04.結語
YYEVA項目 整套工具鍊AE 插件、用戶端渲染 SDK（web/iOS/android/小程式）已開源，歡迎有其他需求想法的小夥伴在評論區留言或直接到代碼倉庫中提出寶貴的 issue。
請大家多多支援我們，點上一個寶貴的Star , 大家的Star是我們最大的動力 。
- 開源位址：https://github.com/yylive/YYEVA
在目前直播業務百花齊放的時代，動效播放解決方案也在不斷發展進步，各種新的動效方案層出不窮，可以預見的是，後續我們仍會不斷進行探索、優化，支援如多圖層混合、動态元素旋轉、支援更多 AE 特性、結合 AI 技術， 為使用者提供更優的體驗。
————END————
推薦閱讀：
百度交易中台之資産系統架構淺析
從零到一了解APP速度測評
流日志輕松應對“10億級别IP對”複雜場景，實作超大規模混合雲網絡流量可視化
百度App Android啟動性能優化-工具篇
數字人技術在直播場景下的應用