介绍

目前移动端主流的动效实现方案包括:Gif序列帧、原生动画、SVGA动画、Lottie动画，MP4动画等，这些动画各有优缺点。方案对比如下图所示，

	Gif	原生动画	SVGA	Y2A	MP4
体积	大	小	小	小	小
解码方式	软解	软解	软解	软解	硬解
缺点	支持颜色少、文件大	硬编码，扩展性差	不支持很多AE特效	不支持很多AE特效	不支持插入元素
优点	较高兼容性，接入成本低	性能好	体积小，支持元素插入	体积小，支持元素插入	压缩率高，所见即所得，支持的特效多，性能好

MP4动效，因其压缩率高、硬解性能好、可支持复杂动效效果（3D、粒子、描边等），对于设计师来说，即使所见即多得，因此是移动端实现动效的首选方案。

混合MP4动效

前面有介绍过，在一些需要复杂的动效场景下，因SVGA、Lottie不支持很多AE特效，很难支持如粒子效果、3D特性等，使用MP4动效是首选方案。但是MP4有一个缺点是，它是一种静态的资源，接入端解码后直接将视频帧渲染到屏幕上，如需支持一些特定元素的插入，是十分困难的。然而我们有很多的业务场景，需要在显示动效的时候，能够混合一些业务特有的元素来同步播放。

在直播间这个应用场景下，MP4的动效前景上，需要根据赠送礼物的用户和主播不同，展示不同的头像和昵称，

例如：

1. 张三 送给 李四 ：

2. 王五 送给 赵六

目前我们大多数都会通过 MP4 + SVGA 或 MP4 + Lottie 来实现

该方案存在如下几个问题：

1. 多个资源下载的问题
2. 多个资源播放不同步的问题
3. 多个资源维护的问题

YYEVA动效

目前YYLive也自研了一套让静态的MP4能够结合业务的动态元素的解决方案，已经开源。该方案包括一整套完整的工具链，覆盖设计侧输出资源使用的Adobe Effects After插件、预览工具、客户端渲染SDK（支持iOS、Android、Web）。我们会在接下来的一段时间，陆续发布多篇文章来介绍这部分的实现细节。

开源地址 ，希望大家能够star, 您的支持是我们不断改进的动力