背景
随着日益增长的需求，直播领域各个场景对动效资源的要求也越来越高。动效资源是直播领域一个十分重要的表现形式。动效资源可应用在很多的场景下，例如礼物动效、玩法动效等。
礼物动效也经历了不同的几个阶段 ： 原生动效 ---> 序列帧 ---> 自研基于矢量动画的Lottie/SVGA ---> 视频动画。
有一天，产品大佬需要技术在一个礼物动效上增加用户和主播的昵称、头像，由于礼物动效有很多粒子效果，3D效果，用原来的SVGA/Lottie方案十分难实现；但是用MP4动效，又不支持在视频指定帧上，插入文字和头像动画。因此，自研一套可支持动态插入业务元素的混合MP4方案十分必要。
本章主要介绍目前最新的可支持动态插入业务元素的混合MP4方案（YYEVA）的整体框架。文章末尾有YYEVA开源的地址，希望大家给YYEVA团队给个Star
YYEVA项目介绍
YYEVA的目标是 提供 一套全新的动画解决方案，满足静态MP4可插入动态业务元素，并实现一套完整的工具链，覆盖设计侧的Adobe After Effects动画输出工具，到客户端渲染SDK。降低设计师的使用成本和业务接入成本，赋能上游业务营收。目前已开源相关代码。请点击YYEVA 了解相关信息
-
YYEVA是一个 轻量级、高性能、跨平台、动态的MP4资源解决方案
-
YYEVA包含一套从设计工具AE插件、在线预览工具、客户端渲染SDK的完整工具链
-
基于仿射矩阵运算，得到图层每一帧的位置信息
-
集成了MP4（avc/hevc）封装协议等相关功能
-
高度可扩展性，可还原设计师的全部细节
-
支持 Web、Android、iOS等
YYEVA工作流程
YYEVA为设计师开发了一个AE插件，用户为设计侧输出一个符合YYEVA规范的MP4资源，设计师在拿到资源后，可以在插件提供的预览工具，查看在不同端的展示效果，可以及时调整。最终确认资源后，输出一个YYEVA的MP4资源，给产品配置到线上，移动端拿到资源后，就可以解析、加载、设置元素、渲染。工作流程如下图所示：
YYEVA整体框架介绍
YYEVA是基于YYAlphaMP4,即透明MP4的基础上，进行的一次改造。 旨在能够在静态的MP4里，支持插入动态的元素。首先，资源都是设计侧制作的：
- 插入什么样的元素
- 元素的形状和大小
- 插入在屏幕上的位置
都应该有设计师来指定。客户端拿到资源后，只需要按照设计师指定的规则，插入相应的业务元素即可，而无需关心任何的内在实现。因此，为了降低设计师的使用成本和业务接入成本，YYEVA为设计师制作了一个AE扩展(YYConverterMP4),以及支持渲染该资源的渲染SDK播放器（YYEVAPlayer）。
产物YYEVA资源实质是一个MP4+Json描述信息，该Json描述信息包含如下信息：
- 视频的基本信息：分辨率、RGB位置、Alpha位置
- 动态元素的相关信息
- 动态元素在每一帧的位置信息
YYEVA特色优势
体积小
Json描述信息使用了zlib压缩，再通过base64写入MP4中，首先对MP4无任何的影响，同时Json数据体积得到大大压缩。
扩展性高
插件基于Adobe After Effects的扩展开发，可读取AE所有特性。对于新的AE特性，可以及时对插件进行开发支持。因为Json信息都是基于结果动画来开发的，只会把动态元素的位置信息写入，所以无需客户端sdk再进行支持。
完善的工具链
目前插件测内部扩充了AE无法直接导出MP4的能力，也支持导出动态元素视频，同时在插件内部，还支持预览视频，设计师无需跳转使用其他工具，十分便捷。渲染SDK目前已支持 iOS、Android、iOS的接入。
YYEVA演示场景
- 玩法动画
目前YYEVA已经开源，开源地址，请大家为YYEVA团队点击宝贵的Star