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ì)比表：
| - | 文件大小 | 解碼方式 | 特效支持 |
|---|---|---|---|
| Lottie | 無法導(dǎo)出 | 軟解 | 無粒子特效 |
| GIF | 4.6M | 軟解 | 只支持8位色彩 |
| Apng | 10.6M | 軟解 | 全支持 |
| Webp | 9.2M | 軟解 | 全支持 |
| mp4 | 1.5M | 硬解 | 無透明背景 |
| VAP | 1.5M | 硬解 | 全支持 |
- 測(cè)試參數(shù)：
- 手機(jī): 小米mix3
- 素材: 736?×?576 80幀
- Apng: 75質(zhì)量; Webp: 75質(zhì)量; VAP: 2000碼率
調(diào)研方案：
- 矢量動(dòng)畫方案（代表 Lottie）：Lottie 矢量動(dòng)畫壓縮率很高，但因?yàn)闊o法顯示特殊效果（比如粒子特效），所以此方案不適合；
- 動(dòng)圖方案（代表 GIF, Apng, Webp）:
- GIF：只支持 8 位顏色，顏色丟失嚴(yán)重，解碼性能低，無法滿足特效效果；
- Apng, Webp：能夠滿足特效效果，但文件大，軟解效率低（低端的手機(jī)上，比如當(dāng)年的紅米1，解碼過程甚至能導(dǎo)致整個(gè)直播間卡頓），這些問題很難接受；
- 視頻方案（代表 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 版本)
評(píng)論
圖片
表情