背景
随着日益增长的需求,直播领域各个场景对动效资源的要求也越来越高。动效资源是直播领域一个十分重要的表现形式。动效资源可应用在很多的场景下,例如礼物动效、玩法动效等。
礼物动效也经历了不同的几个阶段 : 原生动效 ---> 序列帧 ---> 自研基于矢量动画的Lottie/SVGA ---> 视频动画。
有一天,产品大佬需要技术在一个礼物动效上增加用户和主播的昵称、头像,由于礼物动效有很多粒子效果,3D效果,用原来的SVGA/Lottie方案十分难实现;但是用MP4动效,又不支持在视频指定帧上,插入文字和头像动画。因此,自研一套可支持动态插入业务元素的混合MP4方案十分必要。
本章主要介绍目前最新的可支持动态插入业务元素的混合MP4方案(YYEVA)的整体框架。文章末尾有YYEVA开源的地址,希望大家给YYEVA团队给个Star
YYEVA项目介绍
YYEVA的目标是 提供 一套全新的动画解决方案,满足静态MP4可插入动态业务元素,并实现一套完整的工具链,覆盖设计侧的Adobe After Effects动画输出工具,到客户端渲染SDK。降低设计师的使用成本和业务接入成本,赋能上游业务营收。目前已开源相关代码。请点击 YYEVA 了解相关信息
1. YYEVA是一个 轻量级、高性能、跨平台、动态的MP4资源解决方案
2. YYEVA包含一套从设计工具AE插件、在线预览工具、客户端渲染SDK的完整工具链
3. 基于仿射矩阵运算,得到图层每一帧的位置信息
4. 集成了MP4(avc/hevc)封装协议等相关功能
5. 高度可扩展性,可还原设计师的全部细节
6. 支持 Web、Android、iOS等
YYEVA工作流程
YYEVA为设计师开发了一个AE插件,用户为设计侧输出一个符合YYEVA规范的MP4资源,设计师在拿到资源后,可以在插件提供的预览工具,查看在不同端的展示效果,可以及时调整。最终确认资源后,输出一个YYEVA的MP4资源,给产品配置到线上,移动端拿到资源后,就可以解析、加载、设置元素、渲染。工作流程如下图所示:
插入什么样的元素
元素的形状和大小
插入在屏幕上的位置
都应该有设计师来指定。客户端拿到资源后,只需要按照设计师指定的规则,插入相应的业务元素即可,而无需关心任何的内在实现。因此,为了降低设计师的使用成本和业务接入成本,YYEVA为设计师制作了一个AE扩展(YYConverterMP4),以及支持渲染该资源的渲染SDK播放器(YYEVAPlayer)。
YYEVA特色优势
体积小
Json描述信息使用了zlib压缩,再通过base64写入MP4中,首先对MP4无任何的影响,同时Json数据体积得到大大压缩。
扩展性高
插件基于Adobe After Effects的扩展开发,可读取AE所有特性。对于新的AE特性,可以及时对插件进行开发支持。因为Json信息都是基于结果动画来开发的,只会把动态元素的位置信息写入,所以无需客户端sdk再进行支持。
完善的工具链
目前插件测内部扩充了AE无法直接导出MP4的能力,也支持导出动态元素视频,同时在插件内部,还支持预览视频,设计师无需跳转使用其他工具,十分便捷。渲染SDK目前已支持 iOS、Android、iOS的接入。
目前YYEVA已经开源,请大家为YYEVA团队点击宝贵的Star