字節(jié)跳動開源了一個視頻動畫特效SDK（AlphaPlayer）德频，可以通過制作Alpha通道分離的視頻素材，再在客戶端上通過OpenGL ES重新實現(xiàn)Alpha通道和RGB通道的混合疾渴，從而實現(xiàn)在端上播放帶透明通道的視頻。
[圖片上傳失敗...(image-505115-1626873663627)]
AlphaPlayer已經(jīng)在Github上標星650屯仗，累計分支 277個
抖音搞坝、抖音火山版、西瓜小視頻魁袜、今日頭條已經(jīng)接入桩撮。
[圖片上傳失敗...(image-4fc88-1626873663627)]
這套方案對設計師而言明顯降低了特效的制作成本，對于客戶端而言有著更可靠的性能和穩(wěn)定性峰弹，且相比cocos2d引擎有著更低的入門門檻和維護成本店量，為復雜動畫的實現(xiàn)提供了一種全新的方式，新的復雜動畫開發(fā)將會變得更加簡單高效鞠呈。
效果
AlphaPlayer
AlphaPlayer是直播中臺使用的一個視頻動畫特效SDK融师，可以通過制作Alpha通道分離的視頻素材，再在客戶端上通過OpenGL ES重新實現(xiàn)Alpha通道和RGB通道的混合蚁吝，從而實現(xiàn)在端上播放帶透明通道的視頻旱爆。
這套方案對設計師而言明顯降低了特效的制作成本，對于客戶端而言有著更可靠的性能和穩(wěn)定性灭将，且相比cocos2d引擎有著更低的入門門檻和維護成本疼鸟，為復雜動畫的實現(xiàn)提供了一種全新的方式，新的復雜動畫開發(fā)將會變得更加簡單高效庙曙。
背景
在直播項目的原有禮物動畫實現(xiàn)效果是通過cocos引擎實現(xiàn)的空镜，大部分動畫都是通過一系列的旋轉平移縮放組合而成，能實現(xiàn)的動畫效果較簡單且開發(fā)成本較高捌朴。為了豐富動畫的表現(xiàn)形式吴攒，降低開發(fā)成本，我們引入了AlphaPlayer的動畫實現(xiàn)方案砂蔽。
方案對比
目前較常見的動畫實現(xiàn)方案有原生動畫洼怔、幀動畫、gif/webp左驾、lottie/SVGA镣隶、cocos引擎极谊，對于復雜動畫特效的實現(xiàn)做個簡單對比
在復雜動畫特效高效實現(xiàn)的場景中，我們的備選方案會更少一些安岂，可以將討論集中在Cocos2d轻猖、Lottie、Webp和本文的AlphaPlayer上域那。
Lottie
Lottie是非常優(yōu)選的多平臺動畫效果解決方案咙边，其簡單原理是將AE動畫導出的json文件解析成每個layer層級對象，再繪制成對應的Drawable次员，最后顯示在View上败许。在不涉及mask和mattes等特性時性能非常優(yōu)選，主要耗時基本集中在Canvas#draw()上而已淑蔚，json解析時通過流讀取的方式避免一次性加載全部json數(shù)據(jù)帶來的OOM問題市殷。
但是也存在部分不足：
- 如果動畫涉及到mask或mattes等特性時，需要生成2~3個臨時bitmap實現(xiàn)動畫效果束倍，容易引起內存抖動被丧，且涉及的canvas#saveLayer()和canvas#drawBitmap()會帶來額外的耗時；
- 如果動畫中還直接使用了圖片绪妹，在ImageAssetManager首次對圖片解碼是在主線程進行的（據(jù)了解在iOS的版本上，使用圖片導致內存和CPU的性能消耗會更大）柿究；
- 主要耗時還是在draw()上邮旷，繪制區(qū)域越大耗時越長；
- 目前支持的AE特性還有待完善蝇摸，此外有一些特性在低版本上可能還會沒有效果婶肩，設計資源時需要規(guī)避。（Supported After Effect Features）
實際使用過程中貌夕，最常見的首啟全屏引導動畫基本都會包含上面提到的前三點不足律歼，這種情況下性能其實是大幅退化的。因此對于直播場景的復雜特效動畫而言啡专，Lottie就不是一個很合適的實現(xiàn)方案了险毁。
Cocos2d-x
Cocos2d-x支持非常多的游戲功能，諸如精靈们童、動作畔况、動畫、粒子特效慧库、骨骼動畫等等跷跪，可以供開發(fā)者自由實現(xiàn)各種姿勢的動畫效果，再加上自身具備跨平臺能力和輕量級齐板，同時支持Lua作為開發(fā)語言吵瞻，可以說是非常適合植入移動端作為動畫效果實現(xiàn)方案的游戲引擎葛菇。
但實際使用維護中會面臨很多問題：
- 體積大，即使經(jīng)過裁剪也還有2M左右的大小橡羞，如果不是核心場景需要基本很難允許接入眯停；
- 對開發(fā)者的技術棧有較高要求；
- 無法滿足快速迭代尉姨；
- 維護難度大庵朝，尤其是在Android機型兼容的問題上。
Webp
Webp相比PNG和JPEG格式體積可以減少25%又厉，在移動端的平臺支持上也很全面九府，支持24位RGB色；缺點是資源體積比較大覆致，而且使用的軟解效率低下侄旬，低端機上有明顯卡頓問題。
AlphaPlayer
相比于上面提到的幾個方案煌妈，AlphaPlayer的接入體積極欣芨帷（只有40KB左右），而且對動畫資源的還原程度極高璧诵，資源制作時不用考慮特效是否支持的問題汰蜘，對開發(fā)者和設計師都非常友好。通過接入ExoPlayer或者自研播放器可以解決系統(tǒng)播放器在部分機型上可能存在的兼容性問題之宿，且能帶來更好的解碼性能族操。
基本原理
AlphaPlayer主要有兩個核心部分，一個是MediaPlayer比被，負責視頻每一幀的解碼色难，支持接入方自行實現(xiàn)；另一個是VideoRenderer等缀，負責將解析出來的每一幀畫面進行alpha通道混合枷莉，再輸出到Surface上。View使用的是GLSurfaceView尺迂，性能相對TextureView更優(yōu)笤妙，但層級限制在最頂層。
AlphaPlayer內部是通過Render渲染紋理畫面的枪狂，設計師導出的視頻資源會包含兩部分內容——透明遮罩畫面和原視頻畫面兩部分危喉，然后通過shader進行alpha值的混合，詳細可以看 frag.sh和vertex.sh州疾。
