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

2022 年 9 月 27 日
上海
本文字数：3160 字
阅读完需：约 10 分钟

作者 | 龙卷风

导读：伴随着计算机视觉领域的发展，动画也变得越来越炫酷。各种动效解决方案在画质提升时，也要兼顾文件体积和性能。透明 MP4 方案，能让设计师制作动画所见即所得，充分发挥了设计师的想象力和创造力。百度 YYEVA 动效播放器是基于透明 MP4 的基础，自研的一套轻量级、高性能、跨平台的动效方案，支持插入动态元素，提供完善的工具链，一站式解决从设计侧的资源导出、在线预览，到客户端渲染 SDK。
全文 3736 字，预计阅读时间 10 分钟。

01 YYEVA 介绍

YYEVA 实现了一整套完整的工具链，包括：资源输出端的 AE 插件、在线预览工具、客户端渲染 SDK, 实现了透明 MP4 资源，可插入动态的业务元素等功能。

YYEVA 是一个轻量级、高性能、跨平台、动态的 MP4 资源解决方案
YYEVA 包含一套从设计工具 AE 插件、在线预览工具、客户端渲染 SDK 的完整工具链
基于仿射矩阵运算，得到图层每一帧的位置信息
集成了 MP4（avc/hevc）封装协议等相关功能
高度可扩展性，可还原设计师的全部细节
支持 Web、Android、iOS 等

YYEVA 目前已经在多个项目中使用，其中 YY、贴吧、百度、好看等多个场景使用 YYEVA 实现复杂的动效效果，还提供给外部公司的项目组使用

案例 Demo 视频可点击链接查看：https://mp.weixin.qq.com/s/bXgauBqtwUlT8IRXPLr45w

开源项目地址：https://github.com/yylive/yyeva

YYEVA 官网：https://yyeva.netlify.app/

02 YYEVA 探索之路

2.1 动画的集中实现方案

1.面向结果的记录方式

该方式是通过记录动画每一帧的图像，播放时根据图像的 RGBA，还原出动画效果。且只记录了最终结果，还原不出设计的动画元素，所以难以去修改动画元素，插入元素也比较复杂

优点：

所见即所得，可还原所有设计效果；不用再针对具体特效进行开发支持；元素个数和运动复杂度对播放性能影响小

缺点：

文件体积较大；不易支持动态插入或替换元素

2.面向过程的记录方式

该方式是通过记录动画创作过程，在播放端，根据过程计算各元素运动轨迹，还原效果；还原动画需要实时计算，越复杂的动画计算量越大，比如滤镜和贝塞尔曲线相关的计算非常消耗性能。

优点：

体积较小，可以随意拉伸不影响质量；方便动态插入元素

缺点：

性能差，耗 CPU 和 GPU；对复杂动画支持差，越复杂动画越容易卡顿

对比以上 2 种动画的实现原理，为了达到所见即所得的效果，充分发挥设计师的想象力，YYEVA 采用的是面向结果的动画方式---透明 MP4 方案

相比序列帧方案，透明 MP4 具有更高的压缩率的优点，从而解决文件体积大的问题。我们开发了一套 YYEVA 工具链，支持动态插入或替换元素

2.2 视频动画

以 H264 编码，MPEG-4 的颜色采样标准是 YUV，YUV 是亮度和色度的分量叠加，不支持 alpha 通道，因此，如何让 MP4 视频支持透明度，业界常用的方式是使用两个通道分别进行存储视频的 RGB 数据和 Alpha 数据。由于视频动画所见即所得，支持更多复杂特效等优点，目前广泛应用在 YY 各个场景中，成为了 YY 动效播放的首选方案。

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

2.3 混合 MP4 动效

在 MP4 动效里，添加一些如昵称，头像，图片等业务元素，常用的做法是在 MP4 播放的时候，再叠加一个原生的 View,或者使用 MP4 + SVGA/Y2A 的方式来实现。这样往往存在资源下载、同步播放、维护多套资源等问题。

2.4 YYEVA 方案

将视频帧和描述信息合到一个 MP4 资源，同步渲染，解决了资源下载、同步播放、维护多套资源的问题。

YYEVA 的 Json 描述信息如下所示：

descript: 分辨率、插件版本、rgb 区域位置、alpha 区域位
effect: 类型、key
datas: renderFrame、outputFrame

1、YYEVA 描述动态元素

描述一个动画的几大要素：时间、位置、形变

时间:通过 Json 的 frameIndex 描述需要出现的帧索引
位置:通过 Json 的 RenderFrame 描述元素在画布上的位置和大小
形变:通过 Json 的 OutputFrame 获取元素形变的遮罩

2、遮罩 mask 的演示

形状可以通过 2 种方式来记录

记录图形的形状描述
将图形完整保存下来

03 YYEVA 实现方案

YYEVA 框架图如下：

工具链的流程图如下：

3.1 YYEVA 插件

YYEVA 解决方案通过在 AE 上开发的一个扩展程序，解析设计师按规范制作好的相关图层信息，通过 YYConveterMP4 插件的图层解析模块、h264 模块、资源合成模块，导出一个 YYEVA 的资源。

1、图层解析模块

规范性检测
所选合成是否包含透明区域图层：目前插件处理的资源是基于 YY 透明 MP4 资源，所以源素材必须是一个透明 MP4 资源。即 RGB/Alpha 左右分离的
所选合成是否包含 Mask 遮罩区域：文字遮罩区域是以 mask_text 作为合成的 name；图片遮罩区域是以 mask_image 作为合成的 name
是否包含 YYConverterMP4 模板，该模板是用于下面的 H264 模块转换 MP4 使用的
图层处理
计算仿射矩阵：Matrix
计算 Mask 位置：RenderFrame
提取 Mask （遮罩）合成
计算 Mask 合成下所有图层每一帧的 RenderFrame
Copy 一份输出合成，并缩小 Alpha 区域 0.5 倍后调整位置，同时分为三个部分：rgb 、 alpha 、 mask
将所有的有效遮罩图层 Copy 到输出合成，并调整到 mask 区域，计算 OutputFrame
调整输出合成的区域大小
将上面计算的 RenderFrame 、 OutputFrame 组合成一个 Json 数据
拷贝合成

将制定的输出合成拷贝一份后，并缩小 alpha 区域 0.5 倍后调整位置，同时分为三个部分：rgb 、 alpha 、 mask。

2、H264 模块

在 AE 上创建一个指定的 YYConverterMP4 模板，统一渲染队列输出成 avi 格式
在插件内部集成 ffmpeg 命令行工具，通过 child_process，来调起命令行工具，其中 MAC/Windows 使用的 ffmpeg 可执行文件不同（.app 和.exe 文件）
使用 ffmpeg 转换的时候，通过封装三种档位的 CRF 参数，统一输出的画质和体积
通过选择不同的编码器来实现，来输出 H264/H265 资源