AlphaPlayer視頻動畫引擎

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

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

背景

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

方案對比

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

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

Lottie

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

但是也存在部分不足：

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

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

Cocos2d-x

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

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

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

Webp

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

AlphaPlayer

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

運行效果

基本原理

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

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

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

混合過程的詳細代碼可以見?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
// 也可以設(shè)置自行實現(xiàn)的Player, demo中提供了基于ExoPlayer的實現(xiàn)
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)	// 可設(shè)置該視頻是否循環(huán)播放
  if (dataSource.isValid()) {
    playerController.start(dataSource)
  }
}

資源釋放

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

GLSurfaceView & GLTextureView

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

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

高級特性

動畫對齊方式

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

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

Alpha通道壓縮方案

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

GLSurfaceView & GLTextureView

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

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

素材制作工具

素材制作的方式有兩種：

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

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

素材制作工具

素材制作的方式有兩種：

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

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

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

執(zhí)行下面命令，等待成品素材生成。

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

?