字节跳动又一开源力作发布

最新推荐文章于 2024-05-01 16:22:28 发布

Github中文社区

最新推荐文章于 2024-05-01 16:22:28 发布

阅读量1.1k

点赞数 1

文章标签： xhtml 办公软件 gwt webgl drools

原文链接：https://mp.weixin.qq.com/s?__biz=MzU3ODMwNTk1NA==\x26amp;mid=2247493797\x26amp;idx=1\x26amp;sn=e509e054f0f7c19a5ea79c598ff706ea\x26amp;chksm=fd75c268c

版权

点击上方“Github中文社区”，关注

看遍Github，每天提升

第046期原创（整理）分享

来自：Github中文社区作者:字节技术团队

hello，我是huber

字节跳动开源了一个视频动画特效SDK（AlphaPlayer），可以通过制作Alpha通道分离的视频素材，再在客户端上通过OpenGL ES重新实现Alpha通道和RGB通道的混合，从而实现在端上播放带透明通道的视频。

AlphaPlayer已经在Github上标星650，累计分支 277个

抖音、抖音火山版、西瓜小视频、今日头条已经接入。

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

效果

AlphaPlayer

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

背景

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

方案对比

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

在复杂动画特效高效实现的场景中，我们的备选方案会更少一些，可以将讨论集中在Cocos2d、Lottie、Webp和本文的AlphaPlayer上。

Lottie

Lottie是非常优选的多平台动画效果解决方案，其简单原理是将AE动画导出的json文件解析成每个layer层级对象，再绘制成对应的Drawable，最后显示在View上。在不涉及mask和mattes等特性时性能非常优选，主要耗时基本集中在Canvas#draw()上而已，json解析时通过流读取的方式避免一次性加载全部json数据带来的OOM问题。

但是也存在部分不足：

如果动画涉及到mask或mattes等特性时，需要生成2~3个临时bitmap实现动画效果，容易引起内存抖动，且涉及的canvas#saveLayer()和canvas#drawBitmap()会带来额外的耗时；
如果动画中还直接使用了图片，在ImageAssetManager首次对图片解码是在主线程进行的（据了解在iOS的版本上，使用图片导致内存和CPU的性能消耗会更大）；
主要耗时还是在draw()上，绘制区域越大耗时越长；
目前支持的AE特性还有待完善，此外有一些特性在低版本上可能还会没有效果，设计资源时需要规避。（Supported After Effect Features）

实际使用过程中，最常见的首启全屏引导动画基本都会包含上面提到的前三点不足，这种情况下性能其实是大幅退化的。因此对于直播场景的复杂特效动画而言，Lottie就不是一个很合适的实现方案了。

Cocos2d-x

Cocos2d-x支持非常多的游戏功能，诸如精灵、动作、动画、粒子特效、骨骼动画等等，可以供开发者自由实现各种姿势的动画效果，再加上自身具备跨平台能力和轻量级，同时支持Lua作为开发语言，可以说是非常适合植入移动端作为动画效果实现方案的游戏引擎。

但实际使用维护中会面临很多问题：

体积大，即使经过裁剪也还有2M左右的大小，如果不是核心场景需要基本很难允许接入；
对开发者的技术栈有较高要求；
无法满足快速迭代；
维护难度大，尤其是在Android机型兼容的问题上。

Webp

Webp相比PNG和JPEG格式体积可以减少25%，在移动端的平台支持上也很全面，支持24位RGB色；缺点是资源体积比较大，而且使用的软解效率低下，低端机上有明显卡顿问题。

AlphaPlayer

相比于上面提到的几个方案，AlphaPlayer的接入体积极小（只有40KB左右），而且对动画资源的还原程度极高，资源制作时不用考虑特效是否支持的问题，对开发者和设计师都非常友好。通过接入ExoPlayer或者自研播放器可以解决系统播放器在部分机型上可能存在的兼容性问题，且能带来更好的解码性能。

基本原理

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

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