YYEVA动效播放器完整使用指南
【免费下载链接】YYEVAYYEVA(YY Effect Video Animate)是YYLive推出的一个开源的支持可插入动态元素的MP4动效播放器解决方案,包含设计资源输出的AE插件,客户端渲染引擎,在线预览工具。项目地址: https://gitcode.com/gh_mirrors/yy/YYEVA
YYEVA(YY Effect Video Animate)是由YYLive推出的开源解决方案,支持在MP4动效中插入动态元素。该方案包含设计资源输出的AE插件、客户端渲染引擎和在线预览工具,为开发者提供完整的动效播放能力。
项目概述与核心优势
YYEVA动效播放器相比传统序列帧动画具有更高的压缩率和硬解码效率,同时支持插入动态的业务元素。与SVGA、Lottie等播放器相比,YYEVA支持更多的特效,包括复杂3D效果、描边、粒子效果等,真正实现所见即所得的效果。
项目结构详解
核心模块目录
设计资源模块
- AEP/ - After Effects插件相关文件,包含资源转换工具
- img/ - 项目图片资源库,存放所有视觉素材
代码实现区域
- src/ - 播放器逻辑、渲染引擎等核心功能源码
- static/ - 静态资源文件,包含编译后的CSS和JS
工具与配置
- package.json - 项目依赖管理文件
- manifest.xml - 插件配置文件
环境搭建与插件安装
AE插件安装步骤
- 下载YY-MP4转换插件安装包
- 将插件文件复制到AE扩展目录
- 重启After Effects软件
- 在窗口菜单中找到"扩展"下的"YY-MP4转换"工具
YYEVA工具链工作流程
YYEVA提供完整的工具链支持,从设计到渲染的完整流程包括:
- AE设计阶段- 在After Effects中制作动效
- 资源转换阶段- 使用YY-MP4插件转换格式
- 资源生成阶段- 生成YYEVA专用资源文件
- 多平台渲染- 在iOS、Android、Web等平台进行播放
资源转换模式详解
普通资源转换模式
当输出的合成没有引用任何mask_*合成时,插件会自动选择普通资源转换模式。具体步骤如下:
- 选中已经制作好的输出合成
- 打开窗口 -> 扩展 -> YY-MP4转换工具
- 设置输出路径
- 选择视频质量档位:
- 高档:CRF=18
- 中档:CRF=23
- 低档:CRF=28
- 自定义:自行决定CRF值
动态元素MP4转换模式
该模式通过解析mask_*合成,生成带嵌入元素的混合MP4资源。主要步骤包括:
- 创建mask_*合成(mask_text或mask_image)
- 制作具体的动态元素内容
- 在RGB合成上引用mask_*合成
- 使用插件导出资源
Mask合成制作规范
文字类Mask制作
创建mask_text合成后,可以在该合成下制作文字类图层。图层命名规范为:key-fontColor-fontSize
- key:客户端渲染时索引该mask的名称
- fontColor:文案颜色
- fontSize:文案大小
图片类Mask制作
创建mask_image合成后,可以制作图片类图层。图层命名规范为:key-scaleMode
- key:客户端渲染时索引该mask的名称
- scaleMode:图片缩放模式,支持:
- aspectFill:保持图像纵横比并缩放成适合背景定位区域的最大大小
- aspectFit:保持图像纵横比并缩放成将完全覆盖背景定位区域的最小大小
- scaleFill:不保持图像纵横比,铺面背景区域
数据结构与格式说明
YYEVA加载的JSON数据经过zlib压缩后转换为base64格式,并写入MP4的元数据区域。主要包含三个层级:
descript层级
描述资源的基本信息,包括:
- width:视频宽度
- height:视频高度
- isEffect:是否为动态元素视频
- version:插件版本号
- rgbFrame:RGB区域位置信息
- alphaFrame:Alpha区域位置信息
effect层级
描述该资源下所有的mask相关信息。目前mask分为image、text两种类型,可根据effectType判断。
datas层级
描述每一帧mask的位置信息。每个mask元素的每一帧都会有一个data段来描述该mask元素在该帧应如何显示。
效果展示与案例
YYEVA支持多种动效类型,以下是一些典型的效果展示:
平台支持情况
YYEVA目前已支持以下平台:
- Android
- iOS
- Web
- 微信小程序
- 百度小程序
技术架构与渲染流程
YYEVA播放器的技术架构以YYEVAEffectInfo为核心,通过YYEVAAssets获取资源,解码视频帧并结合业务数据,将Image缓存为Texture后合成VideoFrame。
常见问题与解决方案
插件安装问题
确保AE版本兼容性,检查扩展目录权限,重启AE软件。
资源转换失败
检查合成设置,确保符合YYEVA设计规范要求。
渲染异常
验证资源文件完整性,检查客户端渲染引擎版本兼容性。
通过本指南,您可以全面了解YYEVA动效播放器的使用方法,快速集成到您的项目中,为应用添加炫酷的动态元素效果。
【免费下载链接】YYEVAYYEVA(YY Effect Video Animate)是YYLive推出的一个开源的支持可插入动态元素的MP4动效播放器解决方案,包含设计资源输出的AE插件,客户端渲染引擎,在线预览工具。项目地址: https://gitcode.com/gh_mirrors/yy/YYEVA
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考