YYEVA动效播放器--动态元素完美呈现新方案

作者 | 龙卷风

导读：伴随着计算机视觉领域的发展，动画也变得越来越炫酷。各种动效解决方案在画质提升时，也要兼顾文件体积和性能。透明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 数据。由于视频动画所见即所得，支持更多复杂特效等优点，目前广泛应用在 YY 各个场景中，成为了 YY 动效播放的首选方案。

如动画分辨率为 500x500，则 Mp4 的分辨率为 1000x500，其中左边 500x500 为 RGB 数据，右边 500x500 为 Alpha 数据。Player 组合成 RGBA 纹理再进行渲染显示。