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

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

2022-09-27 425

作者 | 龙卷风

导读：伴随着计算机视觉领域的发展，动画也变得越来越炫酷。各种动效解决方案在画质提升时，也要兼顾文件体积和性能。透明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资源

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 方案

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

微信关注我们

原文链接：https://my.oschina.net/u/4939618/blog/5580745

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

跨模态学习能力再升级，EasyNLP电商文图检索效果刷新SOTA

作者：熊兮、欢夏、章捷、临在导读多模态内容（例如图像、文本、语音、视频等）在互联网上的爆炸性增长推动了各种跨模态模型的研究与发展，支持了多种跨模态内容理解任务。在这些跨模态模型中，CLIP（Contrastive Language-Image Pre-training）是一种经典的文图跨模态检索模型，它在大规模图文数据集上进行了对比学习预训练，具有很强的文图跨模态表征学习能力。在先前的工作（看这里）中，中⽂NLP/多模态算法框架EasyNLP支持了CLIP的基础功能，包括模型的Finetune、文图向量抽取等。在本期的工作中，我们对EasyNLP框架进行了再一次升级，推出了融合了丰富电商场景知识的CLIP模型，在电商文图检索效果上刷新了SOTA结果，并且将上述模型免费开源，贡献给开源社区。 EasyNLP（https://github.com/alibaba/EasyNLP）是阿⾥云机器学习PAI 团队基于 PyTorch 开发的易⽤且丰富的NLP算法框架，⽀持常⽤的中⽂预训练模型和⼤模型落地技术，并且提供了从训练到部署的⼀站式 NLP 开发体验。EasyNLP 提供了简洁的接⼝供...

2022-09-27

505

上文我们讲述了利用数据分发组件如何进行广播表的数据分发，相信大家对数据分发也有了一定的了解，但是数据分发能做到的不仅仅是MYSQL表对表的同步，还有更多的适用场景，这里我们分享一个ElasticSearch同步方案。同步方案概述数据分发适用场景本质上该工具是监控数据增量文件，进行增量数据分发，可以减少代码层面的埋点和开发，比较适合我们项目交付的场景： 1.大数据量查询瓶颈，关系型数据库MYSQL，当数据量达到一定量级时，查询会产生瓶颈，将数据分发至ES，利用ES的搜索特性可大幅提升查询性能； 2.业务产品和HZERO基础服务分数据库实例跨库查询问题，比如业务产品需要关联查询Iam_user用户表信息，除了使用Feign，还可以把Iam_user表分发到两个库中，在目标库直接Sql查询； 3.增量消息队列生产，监听Mysql binlog增量推送队列，可自定义消费者逻辑进行队列消费； 4.缓存数据同步，将Mysql数据同步至Redis，减少代码开发。 ElasticSearch同步方案以改造O2产品订单查询为例现状：产品层面按“平台”进行划分，底层分为了四套订单表，每套表有大部...

2022-09-27

489

资源下载

更多资源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。