AlphaPlayer視頻動畫引擎

AlphaPlayer 是字節跳動開源的直播中臺使用的一個視頻動畫特效 SDK，可以通過制作 Alpha 通道分離的視頻素材，再在客戶端上通過OpenGL ES 重新實現 Alpha 通道和 RGB 通道的混合，從而實現在端上播放帶透明通道的視頻。

這套方案對設計師而言明顯降低了特效的制作成本，對于客戶端而言有著更可靠的性能和穩定性，且相比cocos2d引擎有著更低的入門門檻和維護成本，為復雜動畫的實現提供了一種全新的方式，新的復雜動畫開發將會變得更加簡單高效。

背景

在直播項目的原有禮物動畫實現效果是通過 cocos 引擎實現的，大部分動畫都是通過一系列的旋轉平移縮放組合而成，能實現的動畫效果較簡單且開發成本較高。為了豐富動畫的表現形式，降低開發成本，引入了 AlphaPlayer 的動畫實現方案。

方案對比

目前較常見的動畫實現方案有原生動畫、幀動畫、gif/webp、lottie/SVGA、cocos引擎，對于復雜動畫特效的實現做個簡單對比

而在復雜動畫特效高效實現的場景中，我們的備選方案會更少一些，可以將討論集中在Cocos2d、Lottie、Webp和本文的AlphaPlayer上。

Lottie

Lottie是非常優選的多平臺動畫效果解決方案，其簡單原理是將AE動畫導出的json文件解析成每個layer層級對象，再繪制成對應的Drawable，最后顯示在View上。在不涉及mask和mattes等特性時性能非常優選，主要耗時基本集中在Canvas#draw()上而已，json解析時通過流讀取的方式避免一次性加載全部json數據帶來的OOM問題。

但是也存在部分不足：

1. 如果動畫涉及到mask或mattes等特性時，需要生成2~3個臨時bitmap實現動畫效果，容易引起內存抖動，且涉及的canvas#saveLayer()和canvas#drawBitmap()會帶來額外的耗時；
2. 如果動畫中還直接使用了圖片，在ImageAssetManager首次對圖片解碼是在主線程進行的（據了解在iOS的版本上，使用圖片導致內存和CPU的性能消耗會更大）；
3. 主要耗時還是在draw()上，繪制區域越大耗時越長；
4. 目前支持的AE特性還有待完善，此外有一些特性在低版本上可能還會沒有效果，設計資源時需要規避。（Supported After Effect Features）

實際使用過程中，最常見的首啟全屏引導動畫基本都會包含上面提到的前三點不足，這種情況下性能其實是大幅退化的。因此對于直播場景的復雜特效動畫而言，Lottie就不是一個很合適的實現方案了。

Cocos2d-x

Cocos2d-x 支持非常多的游戲功能，諸如精靈、動作、動畫、粒子特效、骨骼動畫等等，可以供開發者自由實現各種姿勢的動畫效果，再加上自身具備跨平臺能力和輕量級，同時支持 Lua 作為開發語言，可以說是非常適合植入移動端作為動畫效果實現方案的游戲引擎。

但實際使用維護中會面臨很多問題：

1. 體積大，即使經過裁剪也還有2M左右的大小，如果不是核心場景需要基本很難允許接入；
2. 對開發者的技術棧有較高要求；
3. 無法滿足快速迭代；
4. 維護難度大，尤其是在Android機型兼容的問題上。

Webp

Webp 相比 PNG 和 JPEG 格式體積可以減少 25%，在移動端的平臺支持上也很全面，支持 24 位 RGB 色；缺點是資源體積比較大，而且使用的軟解效率低下，低端機上有明顯卡頓問題。

AlphaPlayer

相比于上面提到的幾個方案，AlphaPlayer 的接入體積極?。ㄖ挥?0KB左右），而且對動畫資源的還原程度極高，資源制作時不用考慮特效是否支持的問題，對開發者和設計師都非常友好。通過接入ExoPlayer或者自研播放器可以解決系統播放器在部分機型上可能存在的兼容性問題，且能帶來更好的解碼性能。

運行效果

基本原理

主要有兩個核心，一個是IMediaPlayer，負責視頻解碼，支持外部自行實現；另一個是VideoRenderer，負責將解析出來的每一幀畫面進行透明度混合，再輸出到GLTextureView或者GLSurfaceView上。

大致的混合過程可以看下圖示例

原素材的畫面中左邊部分使用RGB通道存儲了原透明視頻的Alpha值，右邊部分使用RGB通道存儲了原透明視頻的RGB值，然后在端上通過OpenGL重新將每個像素點的Alpha值和RGB值進行組合，重新得到ARGB視頻畫面，實現透明視頻的動畫效果。

混合過程的詳細代碼可以見?frag.sh和vertex.sh，

快速接入

iOS

添加依賴

pod 'BDAlphaPlayer'

初始化View

BDAlphaPlayerMetalView *metalView = [[BDAlphaPlayerMetalView alloc] initWithDelegate:self];
[self.view addSubview:metalView];

播放動畫視頻

BDAlphaPlayerMetalConfiguration *configuration = [BDAlphaPlayerMetalConfiguration defaultConfiguration];
NSString *testResourcePath = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"TestResource"];
NSString *directory = [testResourcePath stringByAppendingPathComponent:@"heartbeats"];
configuration.directory = directory;
configuration.renderSuperViewFrame = self.view.frame;
configuration.orientation = BDAlphaPlayerOrientationPortrait;

[self.metalView playWithMetalConfiguration:configuration];

Android

添加依賴

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

dependencies {
    implementation 'com.github.bytedance:AlphaPlayer:1.0.4'
}

初始化PlayerController

val config = Configuration(context, lifecycleOwner)
// 支持GLSurfaceView&GLTextureView, 默認使用GLSurfaceView
config.alphaVideoViewType = AlphaVideoViewType.GL_TEXTURE_VIEW
// 也可以設置自行實現的Player, demo中提供了基于ExoPlayer的實現
val playerController = PlayerController.get(config, DefaultSystemPlayer())	
playerController.setPlayerAction(object: IPlayerAction {
  override fun onVideoSizeChanged(videoWidth: Int, videoHeight: Int, scaleType: ScaleType) {
  }
  override fun startAction() {
  }
  override fun endAction() {
  }
})
playController.setMonitor(object: IMonitor {
  override fun monitor(result: Boolean, playType: String, what: Int, extra: Int, errorInfo: String) {
  }
}) 

將PlayerController綁定到ViewGroup

playerController.attachAlphaView(mVideoContainer)

播放動畫視頻

fun startVideoAnimation() {
  val baseDir = "your video file base dir"
  val portraitFileName = "portrait.mp4"
  val portraitScaleType = 2
  val landscapeFileName = "landscape.mp4"
  val landscapeScaleType = 2
  val dataSource = DataSource().setBaseDir(baseDir)
    .setPortraitPath(portraitFileName, portraitScaleType)
    .setLandscapePath(landscapeFileName, landscapeScaleType)
  	.setLooping(false)	// 可設置該視頻是否循環播放
  if (dataSource.isValid()) {
    playerController.start(dataSource)
  }
}

資源釋放

fun releasePlayerController() {
  playerController.detachAlphaView(mVideoContainer)
  playerController.release()
}

GLSurfaceView & GLTextureView

SurfaceView和TextureView都是用來顯示視頻畫面的，主要差異在于性能和層級，SurfaceView的性能要優于TextureView，但是層級限制在最頂層，TextureView則沒有層級限制?？梢酝ㄟ^如下方式指定alphaVideoViewType來設置。

val config = Configuration(context, lifecycleOwner)
// 支持GLSurfaceView&GLTextureView, 默認使用GLSurfaceView
config.alphaVideoViewType = AlphaVideoViewType.GL_TEXTURE_VIEW
val playerController = PlayerController.get(config, DefaultSystemPlayer())

高級特性

動畫對齊方式

為了解決不同屏幕尺寸的兼容問題和支持半屏動畫視頻的指定位置播放，我們提供了多種視頻裁剪對齊方式，詳細可見ScaleType.kt/BDAlphaPlayerDefine.h。

提供多種動畫對齊方式的目的有二：一是需要對不同屏幕尺寸的設備進行兼容；二是希望盡量減少屏幕中視頻動畫的渲染區域（這對GPU功耗有線性收益），所以如果局部渲染可以滿足動畫表現需求，建議盡量使用局部渲染，即減少mVideoContainer的布局大小。

Alpha通道壓縮方案

為了進一步減少視頻動畫文件的體積，我們做了很多方向的嘗試，包括透明畫面像素點冗余channel的復用和整體尺寸壓縮，可以期待后續更新。

GLSurfaceView & GLTextureView

SurfaceView和TextureView都是用來顯示視頻畫面的，主要差異在于性能和層級，SurfaceView的性能要優于TextureView，但是層級限制在最頂層，TextureView則沒有層級限制?？梢酝ㄟ^如下方式指定alphaVideoViewType來設置。

val config = Configuration(context, lifecycleOwner)
// 支持GLSurfaceView&GLTextureView, 默認使用GLSurfaceView
config.alphaVideoViewType = AlphaVideoViewType.GL_TEXTURE_VIEW
val playerController = PlayerController.get(config, DefaultSystemPlayer())

素材制作工具

素材制作的方式有兩種：

一種是直接使用AE導出成品素材，大致流程就是后期在AE上完成動畫效果后，分離出Alpha通道視頻，然后在同一個AE合成里左邊帶Alpha通道后邊帶正常動畫，一起渲染導出。如果還是不理解，還是讓設計師去代勞吧，專業的人做專業的事。

第二種方式，在AE上完成動畫后期效果后，直接輸出視頻序列幀，然后使用我們提供的素材制作腳本?convertAlphaVideo.py?進行處理也可以直接得出成品素材視頻，腳本的大致原理如下：

素材制作工具

素材制作的方式有兩種：

一種是直接使用AE導出成品素材，大致流程就是后期在AE上完成動畫效果后，分離出Alpha通道視頻，然后在同一個AE合成里左邊帶Alpha通道后邊帶正常動畫，一起渲染導出。如果還是不理解，還是讓設計師去代勞吧，專業的人做專業的事。

第二種方式，在AE上完成動畫后期效果后，直接輸出視頻序列幀，然后使用我們提供的素材制作腳本?convertAlphaVideo.py?進行處理也可以直接得出成品素材視頻，腳本的大致原理如下：

可以看到通道分離和畫面拼接是基于ffmpeg和ImageMagick兩套工具實現的，所以運行前需要先配置ffmpeg和ImageMagick的環境。

執行下面命令，等待成品素材生成。

python convertAlphaVideo.py --dir 'your pictures parent file path'

?