VAP高性能動(dòng)畫組件

VAP（Video Animation Player）是企鵝電競(jìng)開發(fā)的，用于播放酷炫動(dòng)畫的實(shí)現(xiàn)方案。

• 相比 Webp、Apng 動(dòng)圖方案，具有高壓縮率（素材更?。?、硬件解碼（解碼更快）的優(yōu)點(diǎn)
• 相比 Lottie，能實(shí)現(xiàn)更復(fù)雜的動(dòng)畫效果（比如粒子特效）
• 還能在動(dòng)畫中融入自定義的屬性（比如用戶名稱, 頭像）

項(xiàng)目背景

企鵝電競(jìng)是個(gè)直播平臺(tái)，需要在直播間里顯示酷炫的送禮動(dòng)畫。

動(dòng)畫越酷炫，對(duì)素材大小與解碼性能要求越高，調(diào)研了很多方案，先給對(duì)比表：

• 測(cè)試參數(shù)：
  • 手機(jī): 小米mix3
  • 素材: 736?×?576 80幀
  • Apng: 75質(zhì)量; Webp: 75質(zhì)量; VAP: 2000碼率

調(diào)研方案：

1. 矢量動(dòng)畫方案（代表 Lottie）：Lottie 矢量動(dòng)畫壓縮率很高，但因?yàn)闊o法顯示特殊效果（比如粒子特效），所以此方案不適合；
2. 動(dòng)圖方案（代表 GIF, Apng, Webp）:
   • GIF：只支持 8 位顏色，顏色丟失嚴(yán)重，解碼性能低，無法滿足特效效果；
   • Apng, Webp：能夠滿足特效效果，但文件大，軟解效率低（低端的手機(jī)上，比如當(dāng)年的紅米1，解碼過程甚至能導(dǎo)致整個(gè)直播間卡頓），這些問題很難接受；
3. 視頻方案（代表 mp4）: 采用 H264 編碼，相比動(dòng)圖方案，有很高的壓縮率，硬件解碼效率很高，缺點(diǎn)很明顯，無法支持透明背景；

調(diào)研后發(fā)現(xiàn)，要么特效表現(xiàn)無法達(dá)到要求（Lottie, GIF），要么文件太大而且還是軟解（Webp, Apng），要么不支持透明度（mp4），這些方案都不能滿足我們的需求，于是高性能動(dòng)畫組件 VAP 誕生。

平臺(tái)支持

支持：Android,?iOS,?web. 接入說明在對(duì)應(yīng)平臺(tái)目錄中

為大家更方便地使用組件，還有配套的素材制作工具?tool?(工具目前只支持 Mac 版本)