关于移动端:YYEVA动效播放器动态元素完美呈现新方案

作者 | 龙卷风

导读 ：随同着计算机视觉畛域的倒退，动画也变得越来越炫酷。各种动效解决方案在画质晋升时，也要兼顾文件体积和性能。通明 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/bX…

开源我的项目地址：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 动效播放的首选计划。

如动画分辨率为 500×500，则 Mp4 的分辨率为 1000×500，其中右边 500×500 为 RGB 数据，左边 500×500 为 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 资源

3、资源合成模块

• 打包数据
  依据 outputFrame、inputFrame、以及视频的根底信息，组成一个 json

• 数据压缩编码

  将 json 打包编码成 base64 , 并加前后缀 yyeffectmp4json[[Json]] yyeffectmp4json

• 输入成 AVI

  应用 创立的模板 YYConverterMP4 , 将拷贝后的合成 增加到渲染队列中 , 输入 avi 资源

• 输入成 MP4

  利用 H264 模块，编码成 h264/h265 资源

• 数据写入 MP4

  将 json 的数据 利用 ffmpeg 写入 h264/h265 资源的 metadata 段

3.2 YYEVA 客户端渲染

YYEVA 渲染 SDK 整体架构图如下图所示：

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

• 应用资源解析模块，将集成在 Metadata 段的 Json 数据解析进去
• 而后通过元素解析模块，将动静 Json 数据模态化成相应的对象。
• 通过音视频模块，将 MP4 资源的音视频轨解码
• 通过渲染模块，将视频轨 + Mask 动静元素一一渲染到屏幕上

整个渲染流程如下所示：

1、提取形容信息

提取 MP4 的 Metadata 信息，有如图两种形式

• ffmpeg 解复用 MP4 资源，解析 metadata
• 字符匹配

咱们在插件写入 json 数据到 MP4 的时候，将数据做了一层包装 yyeffectmp4json[[jsondata]]yyeffectmp4json, 这样操作次要是为了可能疾速依据字符匹配，将 jsondata 提取进去

2、客户端渲染的实现逻辑

3、RGB+Alpha 混合

4、Mask 混合

5、渲染图解

04 结语

YYEVA 目前曾经开源，包含 AE 插件、客户端渲染 SDK（web/iOS/android），欢送有其余需要想法的小伙伴在评论区留言或间接到代码仓库中提出贵重的 issue。

欢送大家踊跃 star , 大家的关注是咱们最大的能源。

• 开源地址：

  https://github.com/yylive/YYEVA

在目前直播业务百花齐放的时代，动效播放解决方案也在一直倒退提高，各种新的动效计划层出不穷，能够预感的是，后续咱们仍会一直进行摸索、优化，反对如多图层混合、动静元素旋转、反对更多 AE 个性、联合 AI 技术，为用户提供更优的体验。

————END————

举荐浏览：

百度交易中台之资产零碎架构浅析

从零到一理解 APP 速度测评

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

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

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

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

超大模型工程化实际打磨，百度智能云公布云原生 AI 2.0 计划

前后端数据接口合作提效实际