2d动画制作开源字节开源动画引擎AlphaPlayer

导读《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个字节跳动开源的视频动画SDK....

《开源精选》是我们分享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, 默认使用GLSurfaceViewconfig.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 = 2val landscapeFileName = "landscape.mp4"val landscapeScaleType = 2val 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