作者 | 龙卷风

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

如动画分辨率为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资源

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 计划

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