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

ccc908 2023-05-02 13:25:51

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

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 是我们最大的动力。

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

小知识分享：每一个HTML 文档中，都有一个不可或缺的标签：<head>，在几乎所有的HTML文档里，我们都可以看到类似下面这段代码：

<head><meta charset=utf-8><meta http-equiv=content-type content=text/html; charset=utf-8><meta name=renderer content=webkit/><meta name=force-rendering content=webkit/><meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1/><meta http-equiv=Content-Type content=www.sxhxtt.cn ;charset=gb2312><meta name=viewport content=width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no></head>

head标签作为一个容器，主要包含了用于描述 HTML 文档自身信息（元数据）的标签，这些标签一般不会在页面中被显示出来，主要告知搜索引擎本页面的关键字以及对应网址，在SEO中传递相关权重起到非常重要的作用。

...全文