字节跳动开源又一力作

最新推荐文章于 2024-09-30 10:36:33 发布

萌眼牛牛 Lah

最新推荐文章于 2024-09-30 10:36:33 发布

阅读量138

点赞数

文章标签：编程语言 react java github 大数据

本文链接：https://blog.csdn.net/weixin_40190849/article/details/113576663

版权

大家好，我是章鱼猫。

今天给大家推荐的这个项目是「AlphaPlayer」，是直播中台使用的一个视频动画特效 SDK，可以通过制作 Alpha 通道分离的视频素材，再在客户端上通过 OpenGL ES 重新实现 Alpha 通道和 RGB 通道的混合，从而实现在端上播放带透明通道的视频。

这套方案对设计师而言明显降低了特效的制作成本，对于客户端而言有着更可靠的性能和稳定性，且相比 cocos2d 引擎有着更低的入门门槛和维护成本，为复杂动画的实现提供了一种全新的方式，新的复杂动画开发将会变得更加简单高效。

背景

在直播项目的原有礼物动画实现效果是通过 cocos 引擎实现的，大部分动画都是通过一系列的旋转平移缩放组合而成，能实现的动画效果较简单且开发成本较高。为了丰富动画的表现形式，降低开发成本，引入了 AlphaPlayer 的动画实现方案。

方案对比

目前较常见的动画实现方案有原生动画、帧动画、gif/webp、lottie/SVGA、cocos 引擎，对于复杂动画特效的实现做个简单对比。

watermark,image_bG9nby9jc2RuXzEucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLGhfNjI=,g_se,x_0,y_0,t_100

运行效果

watermark,image_bG9nby9jc2RuXzEucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLGhfMjE=,g_se,x_0,y_0,t_100

项目结构 & 基本原理

主要有两个核心部分，一个是 MediaPlayer，负责视频每一帧的解码，支持接入方自行实现；另一个是 VideoRenderer，负责将解析出来的每一帧画面进行 alpha 通道混合，再输出到 Surface 上。View 使用的是 GLSurfaceView，性能相对 TextureView 更优，但层级限制在最顶层。

AlphaPlayer 内部是通过 Render 渲染纹理画面的，设计师导出的视频资源会包含两部分内容 —— 透明遮罩画面和原视频画面两部分，然后通过 shader 进行 alpha 值的混合，详细可以看 frag.sh 和 vertex.sh。

已知接入方