《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个字节跳动开源的视频动画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
开源地址：https://github.com/bytedance/AlphaPlayer
,
