作者 | 龙卷风
导读：伴随着计算机视觉领域的发展，动画也变得越来越炫酷。各种动效解决方案在画质提升时，也要兼顾文件体积和性能。透明MP4方案，能让设计师制作动画所见即所得，充分发挥了设计师的想象力和创造力。百度YYEVA动效播放器是基于透明MP4的基础，自研的一套轻量级、高性能、跨平台的动效方案，支持插入动态元素，提供完善的工具链，一站式解决从设计侧的资源导出、在线预览，到客户端渲染SDK。
全文3736字，预计阅读时间10分钟。
01 YYEVA介绍YYEVA 通过实现一整套完整的工具链，支持在MP4资源中插入动态的业务元素等功能，基于AE实现的插件模块，可还原AE的大部分特性。 工具链包括：资源输出端的 AE 插件、在线预览工具、客户端渲染 SDK,。
YYEVA实现了YYEVA 是一个 轻量级、高性能、跨平台、动态的 MP4 资源解决方案YYEVA 包含一套从设计工具 AE 插件、在线预览工具、客户端渲染 SDK 的完整工具链基于仿射矩阵运算，得到图层每一帧的位置信息集成了 MP4（avc/hevc）封装协议等相关功能高度可扩展性，可还原设计师的全部细节支持 Web、Android、iOS、小程序YYEVA 目前已经在多个项目中接入，其中 YY、贴吧、百度、好看等多个场景使用 YYEVA 实现复杂炫酷的动效效果， 还提供给外部公司的项目组使用。
欢迎大家加入YYEVA-Q群: 981738110，及时知晓YYEVA新功能发布，还可以和群内的YYEVA大神直接交流。
请大家多多支持我们，点上一个宝贵的Star
开源项目地址：https://github.com/yylive/yyeva YYEVA落地的成功案例这是一个可以动态插入文字、图片的MP4资源；其中的图片可以根据场景动态替换，文字的文案和颜色也可以动态替换。
该案例的YYEVA源视频：
02 YYEVA探索之路1. 动画的几种实现方案面向结果的记录方式该方式是通过记录动画每一帧的图像，播放时根据图像的像素值还原出动画效果。且只记录了最终结果，还原不出设计的动画元素，因此难以修改动画元素，实现插入元素比较复杂。
优点：所见即所得，可还原所有设计效果；不用再针对具体特效进行开发支持；元素个数和运动复杂度对播放性能影响小缺点：文件体积较大；不易支持动态插入或替换元素面向过程的记录方式该方式是通过记录动画创作过程，在播放端，根据过程计算各元素运动轨迹，还原效果；还原动画需要实时计算，越复杂的动画计算量越大，比如滤镜和贝塞尔曲线相关的计算非常消耗性能。
优点：体积较小，可以随意拉伸不影响质量；方便动态插入元素缺点：性能差，耗 CPU 和 GPU；对复杂动画支持差，越复杂动画越容易卡顿对比以上 2 种动画的实现原理，为了达到所见即所得的效果，充分发挥设计师的想象力，YYEVA 采用的是面向结果的动画方式 --- 透明 MP4 方案；相比序列帧方案，透明 MP4 具有更高的压缩率的优点，从而解决文件体积大的问题。我们开发了一套 YYEVA 工具链，支持动态插入或替换元素。
2.视频动画H264 编码使用的MPEG-4协议，其颜色采样标准是 YUV。YUV 是亮度和色度的分量叠加，不支持 alpha 通道，因此，如何让 MP4 视频支持透明度，业界常用的方式是使用两个通道分别进行 存储视频的 RGB 数据和 Alpha 数据。由于视频动画所见即所得，支持