1. VAP

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)畫效果(比如粒子特效) 而且VAP還能在動(dòng)畫中融入自定義的屬性（比如用戶名稱, 頭像）

2. 項(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誕生。

3. 實(shí)現(xiàn)原理

方案選擇

mp4視頻方案無論從效果、大小與解碼性能上都是最優(yōu)的，但 H264 的里存的是YUV數(shù)據(jù)，并沒有帶透明通道。VAP方案基于mp4，解決視頻里透明度的問題，這樣就能兼具更好的壓縮效率，與更好的解碼性能。

視頻透明度實(shí)現(xiàn)

H264解碼出來每一幀的數(shù)據(jù)是YUV，轉(zhuǎn)換為RGB后是不帶Alpha通道的，而我們可以在視頻中額外開辟一塊區(qū)域，在RGB通道里存儲(chǔ)Alpha的值，最后利用OpenGL將這些數(shù)據(jù)合成為ARGB圖像（帶透明通道的圖像）。

舉個(gè)例子，解碼器解碼出一幀原始圖像后，合成原理如圖所示：

每一幀都做相同的事情，就是得到帶透明度的視頻，實(shí)際視頻如下：原始視頻中，黑白區(qū)域承載Alpha數(shù)據(jù)。VAP最新版本里實(shí)現(xiàn)了Alpha區(qū)域大小可變，通過縮小Alpha區(qū)域大小，在不影響最終顯示效果的同時(shí)，能有效減少視頻分辨率，提高機(jī)型兼容性，而且為VAP的融合特性空余出多余的區(qū)域。

動(dòng)畫配置信息

動(dòng)畫播放過程中，需要一些配置信息協(xié)助播放（比如Alpha區(qū)域聲明，包括融合動(dòng)畫信息），配置是JSON格式。為了組件更方便使用，所有相關(guān)文件都合并到mp4文件里，這樣播放動(dòng)畫只需要一個(gè)mp4文件即可。

mp4的組織方式與JSON的key-value組織方式很像，被稱為一個(gè)BOX，我們創(chuàng)建一個(gè)新的BOX（vapc VAP Config），JSON內(nèi)容放到這個(gè)BOX里，播放前先讀取此BOX然后播放（ps: mp4規(guī)范里定義如果無法識(shí)別的BOX自動(dòng)忽略，不影響mp4正常播放流程）。

VAP融合動(dòng)畫

VAP還支持在動(dòng)畫中融入自定義屬性，比如用戶名稱, 頭像。我們稱其為VAP融合動(dòng)畫。

視頻內(nèi)容無法直接實(shí)現(xiàn)屬性的插入，只能曲線救國(guó)，通過對(duì)屬性圖片進(jìn)行修剪，欺騙用戶的眼睛，讓其看起來像是在視頻內(nèi)容里，實(shí)現(xiàn)最終的融合效果（效果如文章開頭展示）。

為實(shí)現(xiàn)屬性圖片處理，需要引入“遮罩”素材，利用遮罩與屬性圖片進(jìn)行Porter-Duff操作，就能得到需要的形狀

再將結(jié)果貼到視頻對(duì)應(yīng)坐標(biāo)位置，就能實(shí)現(xiàn)最后的融合效果。

“遮罩”素材保存在每一幀視頻內(nèi)容里，之前通過縮小Aplha區(qū)域，空出來的區(qū)域得到利用。

配套工具

為大家更方便的使用組件，還有配套的素材制作工具

項(xiàng)目地址

開源地址：https://github.com/Tencent/vap