企业官网建设流程全解析

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插件安装步骤

1. 下载YY-MP4转换插件安装包
2. 将插件文件复制到AE扩展目录
3. 重启After Effects软件
4. 在窗口菜单中找到"扩展"下的"YY-MP4转换"工具

YYEVA工具链工作流程

YYEVA提供完整的工具链支持，从设计到渲染的完整流程包括：

1. AE设计阶段- 在After Effects中制作动效
2. 资源转换阶段- 使用YY-MP4插件转换格式
3. 资源生成阶段- 生成YYEVA专用资源文件
4. 多平台渲染- 在iOS、Android、Web等平台进行播放

资源转换模式详解

普通资源转换模式

当输出的合成没有引用任何mask_*合成时，插件会自动选择普通资源转换模式。具体步骤如下：

1. 选中已经制作好的输出合成
2. 打开窗口 -> 扩展 -> YY-MP4转换工具
3. 设置输出路径
4. 选择视频质量档位：
   • 高档：CRF=18
   • 中档：CRF=23
   • 低档：CRF=28
   • 自定义：自行决定CRF值

动态元素MP4转换模式

该模式通过解析mask_*合成，生成带嵌入元素的混合MP4资源。主要步骤包括：

1. 创建mask_*合成（mask_text或mask_image）
2. 制作具体的动态元素内容
3. 在RGB合成上引用mask_*合成
4. 使用插件导出资源

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