让MP4动效支持动态插入：YYEVA 全链路拆解

让MP4动效支持动态插入YYEVA 全链路拆解【免费下载链接】YYEVAYYEVAYY Effect Video Animate是YYLive推出的一个开源的支持可插入动态元素的MP4动效播放器解决方案包含设计资源输出的AE插件客户端渲染引擎在线预览工具。项目地址: https://gitcode.com/gh_mirrors/yy/YYEVA做直播间礼物特效设计师交来的 MP4 到手就是死的昵称和头像插不进去。SVGA、Lottie 能插动态数据却做不了复杂 3D 动效。YYEVA 让 MP4 动效在播放时也能插入动态元素导出时把遮罩逐帧位置写进文件客户端用真实业务数据替换对应区域。它是什么以及它不做什么它让静态 MP4 动效支持运行时插入文字、图片等业务元素。动态元素插入文字、图片两类遮罩元素透明背景兼容透明 MP4 方案全特效3D、粒子、描边均支持硬解码H.264/H.265CPU 占用低多端 SDKAndroid、iOS、Web、小程序它不负责从零生成动画也不是通用动画格式源素材仍需在 AE 中按规范制作简单的矢量动画场景直接用 Lottie 更省事。透明背景动态 MP4 礼物效果 拆开看YYEVA 由哪几块组成设计到多端输出的工具链流程AE 插件设计侧资源输出CEP 插件源码位于 AEP/com.yy.aeconverterformp4/扩充了 AE 渲染 MP4 的能力。输入是包含 mask 合成的工程输出是混合 MP4视频本体加嵌入元数据。转换前插件会校验所选合成——是否含透明区域、是否引用了mask_text或mask_image合成不满足则按普通资源转换处理。渲染引擎客户端播放各平台 SDKAndroid、iOS、Web、小程序负责三件事从文件提取元数据、硬解码视频轨道、在播放时把业务数据叠进遮罩区域。在线预览工具把导出的 MP4 拖进预览区即可看到视频包含哪些可嵌入元素、key 和类型各是什么设计师不用搭客户端就能验证。️ 从零跑通分步上手1. 环境准备git clone https://gitcode.com/gh_mirrors/yy/YYEVA用 ZXP_Installer 安装插件重启 AE 后在窗口 → 扩展中应能看到 YY-MP4 转换入口。2. 配置 AE 环境两步创建名为YYConvertMP4的 QuickTime 输出模板RGB 通道、8 位未压缩在首选项 → 脚本和表达式中允许脚本写入文件并访问网络。逐步截图见 工具安装和环境搭建.md。3. 制作 mask 合成新建mask_text文字类和mask_image图片类两个合成大小和帧率与输出合成的 rgb 区域一致。图层命名遵循key-fontColor-fontSize文字或key-scaleMode图片key 就是客户端索引该元素用的值。4. 导出并验证YY-MP4 转换插件主界面打开转换工具设置输出路径与质量档高 CRF18、中 23、低 28点击开始转换输出目录会生成 h264/h265 两套混合 MP4最后用预览工具核对 key。 YYEVA 能解决哪几类问题动态元素插入后的播放效果直播间礼物特效全屏礼物要显示送礼人的头像和昵称但 MP4 本身是静态资源。对应能力是 mask_image mask_text 双遮罩输出。效果是头像、昵称在遮罩位置逐帧更新且透明背景不遮挡直播间画面。复杂 3D / 粒子动效加业务数据这类效果超出 Lottie、SVGA 的表达范围通常只能做成纯静态 MP4。对应能力是 MP4 硬解码特效叠加动态元素插入。效果是视觉质量保持设计稿原样业务数据却能按人变化。多端一致性同一份动效要同时跑在 Android、iOS 和 Web 上。对应能力是统一的资源格式与多端 SDK。效果是一份资源多端复用无需为各端单独出图。⚙️ 底层机制它是怎么跑起来的rgb 与 alpha 区域划分区域划分输出合成被分成 rgb、alpha、mask 三个区域alpha 区域缩小 0.5 倍右侧腾出的空间存放 mask 内容。逐帧位置计算插件读取 mask 合成内每帧图层的仿射矩阵把图层内容大小的四个顶点做变换算出 renderFrame遮罩在画布上的位置再把图层拷贝进区域 3记录 outputFrame遮罩在视频内的位置。元数据写入descript / effect / datas 三层 Json 经 zlib 压缩、base64 编码后用yyeffectmp4json[[...]]yyeffectmp4json前后缀包裹写入 MP4 的 Metadata 段——前后缀是为了 H5 不依赖 ffmpeg 也能用正则定位。客户端提取用 ffmpeg 或正则解出 base64zlib 解压还原 Json同时硬解码视频轨道得到每帧 pixelBuffer。逐帧合成解码帧左半是 rgb、右半是 alpha右侧 R 值除以 255 即透明度将 outputFrame 区域替换为业务数据昵称文字、头像图片再按 renderFrame 定位合成上屏。 延伸学习YYEVA-让MP4静态资源也能够动态起来.md完整实现方案从插件解析到客户端合成的全过程。YYEVA设计规范.mdmask 合成的命名规范与导出操作面向设计师。数据结构.mddescript / effect / datas 三层 Json 的逐字段定义。工具安装和环境搭建.md插件安装与 YYConvertMP4 模板的配置步骤。YYEVA 让复杂 MP4 动效能承载业务数据。建议先用仓库示例合成跑通导出流程再翻 Json 结构。【免费下载链接】YYEVAYYEVAYY Effect Video Animate是YYLive推出的一个开源的支持可插入动态元素的MP4动效播放器解决方案包含设计资源输出的AE插件客户端渲染引擎在线预览工具。项目地址: https://gitcode.com/gh_mirrors/yy/YYEVA创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考