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

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

背景

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

方案對(duì)比

目前較常見(jiàn)的動(dòng)畫(huà)實(shí)現(xiàn)方案有原生動(dòng)畫(huà)、幀動(dòng)畫(huà)、gif/webp、lottie/SVGA、cocos引擎，對(duì)于復(fù)雜動(dòng)畫(huà)特效的實(shí)現(xiàn)做個(gè)簡(jiǎn)單對(duì)比

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

Lottie

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

但是也存在部分不足：

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

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

Cocos2d-x

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

但實(shí)際使用維護(hù)中會(huì)面臨很多問(wèn)題：

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

Webp

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

AlphaPlayer

相比于上面提到的幾個(gè)方案，AlphaPlayer 的接入體積極小（只有40KB左右），而且對(duì)動(dòng)畫(huà)資源的還原程度極高，資源制作時(shí)不用考慮特效是否支持的問(wèn)題，對(duì)開(kāi)發(fā)者和設(shè)計(jì)師都非常友好。通過(guò)接入ExoPlayer或者自研播放器可以解決系統(tǒng)播放器在部分機(jī)型上可能存在的兼容性問(wèn)題，且能帶來(lái)更好的解碼性能。

運(yùn)行效果

基本原理

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

大致的混合過(guò)程可以看下圖示例

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

混合過(guò)程的詳細(xì)代碼可以見(jiàn)?frag.sh和vertex.sh，

快速接入

iOS

添加依賴(lài)

pod 'BDAlphaPlayer'

初始化View

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

播放動(dòng)畫(huà)視頻

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

添加依賴(lài)

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

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

初始化PlayerController

val config = Configuration(context, lifecycleOwner)
// 支持GLSurfaceView&GLTextureView, 默認(rèn)使用GLSurfaceView
config.alphaVideoViewType = AlphaVideoViewType.GL_TEXTURE_VIEW
// 也可以設(shè)置自行實(shí)現(xiàn)的Player, demo中提供了基于ExoPlayer的實(shí)現(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)

播放動(dòng)畫(huà)視頻

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都是用來(lái)顯示視頻畫(huà)面的，主要差異在于性能和層級(jí)，SurfaceView的性能要優(yōu)于TextureView，但是層級(jí)限制在最頂層，TextureView則沒(méi)有層級(jí)限制。可以通過(guò)如下方式指定alphaVideoViewType來(lái)設(shè)置。

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

高級(jí)特性

動(dòng)畫(huà)對(duì)齊方式

為了解決不同屏幕尺寸的兼容問(wèn)題和支持半屏動(dòng)畫(huà)視頻的指定位置播放，我們提供了多種視頻裁剪對(duì)齊方式，詳細(xì)可見(jiàn)ScaleType.kt/BDAlphaPlayerDefine.h。

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

Alpha通道壓縮方案

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

GLSurfaceView & GLTextureView

SurfaceView和TextureView都是用來(lái)顯示視頻畫(huà)面的，主要差異在于性能和層級(jí)，SurfaceView的性能要優(yōu)于TextureView，但是層級(jí)限制在最頂層，TextureView則沒(méi)有層級(jí)限制。可以通過(guò)如下方式指定alphaVideoViewType來(lái)設(shè)置。

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

素材制作工具

素材制作的方式有兩種：

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

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

素材制作工具

素材制作的方式有兩種：

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

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

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

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

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

?