当前位置：首页 > news >正文

深入解析YYEVA数据结构：理解遮罩、动态元素与位置信息

news 2026/6/6 14:09:34

深入解析YYEVA数据结构：理解遮罩、动态元素与位置信息

【免费下载链接】YYEVAYYEVA（YY Effect Video Animate）是YYLive推出的一个开源的支持可插入动态元素的MP4动效播放器解决方案，包含设计资源输出的AE插件，客户端渲染引擎，在线预览工具。项目地址: https://gitcode.com/gh_mirrors/yy/YYEVA

YYEVA（YY Effect Video Animate）是一个开源的支持可插入动态元素的MP4动效播放器解决方案，它通过精心设计的数据结构让静态MP4资源能够动态化。本文将深入解析YYEVA数据结构的核心组成部分，帮助您理解遮罩、动态元素与位置信息的工作原理。🎯

YYEVA数据结构概述

YYEVA的数据结构是其核心技术之一，它通过JSON格式存储了所有必要的渲染信息。这些数据经过zlib压缩和base64编码后，嵌入到MP4文件的Metadata段中，实现了高效的传输和解析。

整个数据结构分为三个主要层次：

descript- 描述视频资源的整体信息
effect- 描述所有遮罩元素的属性信息
datas- 存储每一帧中遮罩元素的位置信息

1. descript：视频资源描述层

descript层是整个数据结构的基础，它定义了视频的基本属性和布局信息。这个层级包含了以下关键字段：

字段名	类型	描述
width	整数	输出视频的宽度
height	整数	输出视频的高度
isEffect	整数	是否为动态元素视频（1表示是）
version	整数	插件版本号
rgbFrame	数组	RGB区域的位置信息 [x, y, width, height]
alphaFrame	数组	Alpha透明区域的位置信息 [x, y, width, height]

关键特性解析：

rgbFrame和alphaFrame：这是YYEVA支持透明MP4的关键技术。视频被划分为RGB区域和Alpha区域，分别存储颜色信息和透明度信息。
isEffect标志：这个标志位告诉渲染引擎是否需要处理动态元素，实现了向后兼容性。

2. effect：遮罩元素描述层

effect层定义了所有可插入的动态元素（遮罩）的属性和类型。每个遮罩元素都包含以下基础属性：

基础属性（所有类型通用）

属性名	类型	描述
effectWidth	整数	动态元素的原始宽度
effectHeight	整数	动态元素的原始高度
effectId	整数	动态元素的唯一标识ID
effectTag	字符串	业务逻辑使用的标签（如"nickName"、"user_avatar"）
effectType	字符串	动态元素类型（"txt"或"img"）

文字类型特有属性

当effectType为"txt"时，还需要以下属性：

{ "fontColor": "#ffffff", // 文字颜色 "fontSize": 13 // 文字大小 }

图片类型特有属性

当effectType为"img"时，需要指定缩放模式：

{ "scaleMode": "aspectFill" // 图片适配模式 }

缩放模式详解：

scaleFill：不保持纵横比，铺满显示区域（默认模式）
aspectFit：保持纵横比，缩放至完全覆盖区域的最小尺寸
aspectFill：保持纵横比，缩放至适合区域的最大尺寸

3. datas：帧级位置信息层

datas层是数据结构中最动态的部分，它存储了每一帧中每个遮罩元素的具体位置信息。这个层级实现了真正的动态效果。

数据结构示例

{ "frameIndex": 0, // 帧索引 "data": [ { "renderFrame": [x1, y1, w1, h1], // 在渲染画布上的位置 "effectId": 1, // 对应的遮罩ID "outputFrame": [x1`, y1`, w1`, h1`] // 在输出视频区域的位置 } ] }

关键概念解析

frameIndex：当前帧的索引号，从0开始计数
renderFrame：遮罩在渲染画布上的位置和大小 [x, y, width, height]
outputFrame：遮罩在最终输出视频中的位置和大小
effectId：关联到effect层中对应的遮罩元素

YYEVA数据结构的工作流程

1. 设计阶段

设计师在AE中使用YYEVA插件创建遮罩元素，设置动态效果和动画路径。

2. 导出阶段

AE插件自动生成包含descript、effect、datas三层数据的JSON结构。

3. 压缩编码

数据经过zlib压缩和base64编码，嵌入到MP4文件的Metadata中。

4. 客户端渲染

渲染引擎读取Metadata，解码数据，根据datas中的帧级信息实时渲染动态元素。

实际应用场景示例

场景一：直播间用户昵称显示

{ "effect": [ { "effectWidth": 200, "effectHeight": 50, "effectId": 1, "effectTag": "user_nickname", "effectType": "txt", "fontColor": "#FFD700", "fontSize": 24 } ] }

场景二：用户头像动态展示

{ "effect": [ { "effectWidth": 100, "effectHeight": 100, "effectId": 2, "effectTag": "user_avatar", "effectType": "img", "scaleMode": "aspectFill" } ] }