VAP高性能動畫組件

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

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

項目背景

企鵝電競是個直播平臺，需要在直播間里顯示酷炫的送禮動畫。

動畫越酷炫，對素材大小與解碼性能要求越高，調研了很多方案，先給對比表：

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

調研方案：

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

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

平臺支持

支持：Android, iOS, web. 接入說明在對應平臺目錄中

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