本期推荐的是一个字节跳动开源的视频动画SDK——AlphaPlayer。

AlphaPlayer是直播台使用的一个视频动画SDK，可以通过制作Alpha通道分离的视频素材，再在客户端上通过ES重新实现Alpha通道和RGB通道的混合，真正实现在OpenGL中播放带透明通道的视频。

这套系统的维护方案明显降低了客户端的制作成本，因为它的性能和启动成本更可靠，比 cocos2d 发动机更可靠，而且负载为负载和成本，为复杂动画地提供了一种全新的方式，新的复杂的动画开发是非常简单的高效。

对比方案

目前比较常见的动画方案有哪些比较简单的动画方案有杏动画、帧动画、gif/web、lottie/引擎，对于SVGA动画效果、cocos的实现做个简单对比：

AlphaPlayer的访问体积极小（只有40KB左右），而且对动画资源的高度、资源制作时不需要考虑特效的问题，对开发者和设计者非常友好。

运行效果：

基本原理

主要有两个核心，IMediaPlayer负责视频输出接口，再支持外部渲染器；另一个是VideoPlayer负责解析每个帧画面进行混合，或者GLTextViewGLSur上。

大致的混合过程可以看下图示例：

原始图像的画面中传送的 RGB 通道存储了原始透明的 Alpha 部分，右边部分使用 RGB 通道值存储了原始透明的 RGB 值，在端上通过 OpenGL 视频重新显示各个像素的 Alpha 和 RGB进行数值组合，重新生成ARGB视频画面，实现透明视频的动画效果。

快速访问

• iOS

添加

pod 'BDAlphaPlayer'

初始化查看

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()

}

—END—

开源协议：Apache2.0