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 纹理再进行渲染显示。

3.MP4混合动效

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

4. YYEVA方案

YYEVA采用的是面向结果的动画方式 — 透明 MP4 方案，将视频帧和描述信息合到一个 MP4 资源，同步渲染， 解决了维护多套资源、同步播放的问题。

其中，Json描述信息描述了：

• 视频基本信息： 分辨率、插件版本、RGB位置、Alpha位置
• 动态元素基本信息： 动态元素类型、动态元素索引的Key
• 动态元素每一帧位置信息： 输出视频的位置、画布上的位置

Json的描述信息请点击链接具体查看分析

03. YYEVA实现方案

YYEVA框架图如下图所示

YYEVA包含了2个核心部分：

• AE插件 ： 负责解析设计师制作的动画图层，输出一个YYEVA资源
• 客户端渲染SDK ： 负责解析YYEVA资源，根据业务传入的动态文字、图片，渲染到画布上

YYEVA的工具链如下图所示：

3.1 YYEVA插件

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

3.2 YYEVA渲染SDK

客户端在读取到一个 YYEVA 资源后，会通过如下渲染流程：

• 使用资源解析模块，将MP4的 Metadata 段的 Json 数据解析出来
• 然后通过元素解析模块，将动态 Json 数据模态化成相应的对象。
• 通过音视频模块，将 MP4 资源的音视频轨解码
• 通过渲染模块，将视频轨 + Mask 动态元素分别渲染到屏幕上

客户端SDK渲染流程

客户端SDK渲染客户端实现逻辑

如果有多个动态元素，在一个渲染周期，会把所有的动态元素按照YYEVA插件保存的信息和数据，渲染一次。

其中

RGB+Alpha的混合流程如下：

Mask的混合流程如下：

04.结语

YYEVA项目 整套工具链AE 插件、客户端渲染 SDK（web/iOS/android/小程序）已开源，欢迎有其他需求想法的小伙伴在评论区留言或直接到代码仓库中提出宝贵的 issue。

请大家多多支持我们，点上一个宝贵的Star , 大家的Star是我们最大的动力 。

• 开源地址：https://github.com/yylive/YYEVA

在目前直播业务百花齐放的时代，动效播放解决方案也在不断发展进步，各种新的动效方案层出不穷，可以预见的是，后续我们仍会不断进行探索、优化，支持如多图层混合、动态元素旋转、支持更多 AE 特性、结合 AI 技术， 为用户提供更优的体验。

————END————

推荐阅读：

百度交易中台之资产系统架构浅析

从零到一了解APP速度测评

流日志轻松应对“10亿级别IP对”复杂场景，实现超大规模混合云网络流量可视化

百度App Android启动性能优化-工具篇

数字人技术在直播场景下的应用

百度工程师教你玩转设计模式（工厂模式）

超大模型工程化实践打磨，百度智能云发布云原生 AI 2.0 方案

前后端数据接口协作提效实践