"Rendervid 支持哪些图层类型？"

"Rendervid 支持 8 种内置图层类型：文本（具有 100+ 种字体的丰富排版）、图像（具有 cover/contain/fill 模式）、视频（具有播放控制）、形状（矩形、椭圆、多边形、星形、SVG 路径）、音频（具有混音效果）、组（用于嵌套图层）、lottie（用于 Lottie 动画）和自定义（用于 React 组件）。"

"自定义 React 组件在 Rendervid 中如何工作？"

"自定义组件可以通过三种方式部署：内联（JavaScript 代码直接在 JSON 模板中）、基于 URL（从 CDN 加载）或作为预注册引用。每个组件接收 frame、fps、sceneDuration 和 layerSize 属性，以及您定义的任何自定义属性。组件使用 React.createElement() 进行渲染。"

"包含哪些预构建的 React 组件？"

"Rendervid 在 @rendervid/components 包中包含多个预构建组件：用于数据可视化的 AnimatedLineChart、用于北极光效果的 AuroraBackground、用于流体动画的 WaveBackground、用于 17 种专业过渡效果的 SceneTransition，以及用于逐字符文本显示的 TypewriterEffect。"

"Rendervid 包含可视化编辑器吗？"

"是的，@rendervid/editor 包提供了一个完整的可视化模板编辑器，具有基于时间轴的编辑、图层管理、用于编辑图层属性的属性面板、撤消/重做历史记录和实时预览。@rendervid/player 包提供了一个独立的播放器组件用于预览模板。"

"我可以为 Rendervid 创建自己的自定义组件吗？"

"当然可以。您可以编写自定义 React 组件来渲染逐帧动画。组件接收当前帧号、fps、场景持续时间和图层大小，使您完全控制程序化动画、物理模拟、数据可视化、粒子系统等。"

Rendervid 组件 - 图层类型、React 组件和可视化编辑器

探索所有 Rendervid 组件：8 种内置图层类型（文本、图像、视频、形状、音频、组、lottie、自定义），预构建的 React 组件，可视化模板编辑器和视频播放器。使用完整的 React 支持创建自定义组件。

Rendervid Components Video Rendering React

Rendervid 基于组件化架构构建，使视频创建模块化、可扩展且对开发者友好。Rendervid 模板中的每个元素都是一个图层，每个图层都有一个特定的类型来决定其渲染方式。凭借 8 种内置图层类型、不断增长的预构建 React 组件库、可视化模板编辑器和独立播放器，Rendervid 为您提供了以编程方式制作专业视频内容所需的一切。

本页涵盖完整的组件生态系统：从文本和形状等基本图层类型，到音频和视频播放，再到解锁无限创意可能性的完全自定义 React 组件。无论您是构建简单的标题卡还是复杂的数据驱动动画，了解这些组件都是基础。

内置图层类型

Rendervid 模板中的每个图层都定义为一个带有 type 字段的 JSON 对象。类型决定了可用的属性和渲染行为。以下是 8 种内置图层类型的详细参考。

文本图层

text 图层是 Rendervid 中功能最丰富的基本类型。它渲染样式化文本，完全控制排版、对齐、颜色、效果和动画。

排版属性：

属性	描述	示例
`fontSize`	字体大小（像素）	`48`
`fontFamily`	字体系列名称	`"Inter"`
`fontWeight`	字重，从 100 到 900	`700`
`fontStyle`	正常或斜体	`"italic"`

Rendervid 内置了 100+ 种 Google 字体。您可以通过指定 fontFamily 属性来使用其中任何一种，无需加载外部样式表。

对齐属性：

属性	值	默认值
`textAlign`	`left`、`center`、`right`、`justify`	`left`
`verticalAlign`	`top`、`middle`、`bottom`	`top`

样式和效果：

color 和 backgroundColor 用于基本着色
textShadow 用于投影
textStroke 用于描边文本
textDecoration 用于下划线、删除线
textTransform 用于大写、小写、首字母大写
maxLines 带自动省略号截断
内置打字机效果用于逐字符文本显示

{
  "type": "text",
  "text": "欢迎来到 Rendervid",
  "x": 100,
  "y": 200,
  "width": 800,
  "height": 100,
  "fontSize": 64,
  "fontFamily": "Montserrat",
  "fontWeight": 700,
  "color": "#FFFFFF",
  "textAlign": "center",
  "verticalAlign": "middle",
  "textShadow": "2px 2px 8px rgba(0,0,0,0.5)"
}

对于高级文本动画（如打字机效果），可以将文本图层与关键帧动画结合使用，或使用专用的 TypewriterEffect 组件。

图像图层

image 图层显示具有灵活尺寸和裁剪选项的光栅和矢量图像。

关键属性：

属性	描述	值
`source`	图像文件的 URL	任何有效的 URL
`fit`	图像如何填充其边界	`cover`、`contain`、`fill`、`none`
`position`	裁剪锚点	CSS 样式的 object-position，例如 `"center top"`

支持的格式： PNG、JPEG、WebP、SVG、GIF

{
  "type": "image",
  "source": "https://example.com/hero-banner.png",
  "x": 0,
  "y": 0,
  "width": 1920,
  "height": 1080,
  "fit": "cover",
  "position": "center center"
}

fit 属性的工作方式类似于 CSS object-fit：

cover – 缩放图像以填充图层，裁剪多余部分
contain – 缩放以完全适应图层内，可能有黑边
fill – 拉伸图像以精确匹配图层尺寸
none – 以原生分辨率渲染图像

视频图层

video 图层将视频片段嵌入到您的合成中，具有完整的播放控制。

关键属性：

属性	描述	默认值
`source`	视频文件的 URL	必需
`startTime`	源视频的偏移量（秒）	`0`
`playbackRate`	速度倍数	`1`
`muted`	是否静音	`false`
`loop`	循环播放视频片段	`false`

{
  "type": "video",
  "source": "https://cdn.example.com/background-clip.mp4",
  "x": 0,
  "y": 0,
  "width": 1920,
  "height": 1080,
  "startTime": 5.0,
  "playbackRate": 1.0,
  "muted": true,
  "loop": true
}

使用 startTime 跳过片头或跳转到源素材中的特定点。与 playbackRate 结合使用可实现慢动作（0.5）或延时（2.0）效果。

形状图层

shape 图层绘制具有填充、描边、渐变和圆角的矢量形状。

形状类型：

类型	描述
`rectangle`	基本矩形，可选 `borderRadius`
`ellipse`	圆形或椭圆形
`polygon`	可配置边数的正多边形
`star`	可配置点数的星形
`path`	自定义 SVG 路径数据

样式属性：

fill – 纯色或渐变
stroke – 边框颜色
strokeWidth – 边框粗细
borderRadius – 矩形的圆角
渐变： linear 和 radial 渐变填充

{
  "type": "shape",
  "shapeType": "rectangle",
  "x": 100,
  "y": 100,
  "width": 400,
  "height": 300,
  "borderRadius": 16,
  "fill": {
    "type": "linear",
    "colors": ["#6366F1", "#8B5CF6"],
    "angle": 135
  },
  "stroke": "#FFFFFF",
  "strokeWidth": 2
}

对于自定义形状，使用带有标准 SVG 路径数据的 path 类型：

{
  "type": "shape",
  "shapeType": "path",
  "path": "M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80",
  "fill": "#EC4899",
  "stroke": "none"
}

音频图层

audio 图层为您的合成添加音频轨道，具有音量控制、淡入淡出和完整的效果链。

关键属性：

属性	描述	默认值
`source`	音频文件的 URL	必需
`volume`	音量级别（0 到 1）	`1`
`fadeIn`	淡入持续时间（秒）	`0`
`fadeOut`	淡出持续时间（秒）	`0`

音频效果链：

Rendervid 包含内置的效果处理管道。可用效果：

EQ – 均衡器用于音调塑造
Compressor – 动态范围压缩
Reverb – 空间混响
Delay – 回声/延迟效果
Gain – 音量提升或衰减
High-pass filter – 去除低频
Low-pass filter – 去除高频
Panning – 立体声定位（左/右）

{
  "type": "audio",
  "source": "https://cdn.example.com/background-music.mp3",
  "volume": 0.7,
  "fadeIn": 2.0,
  "fadeOut": 3.0,
  "effects": [
    { "type": "highpass", "frequency": 200 },
    { "type": "compressor", "threshold": -24, "ratio": 4 },
    { "type": "reverb", "wet": 0.3, "decay": 2.5 },
    { "type": "gain", "value": 0.8 }
  ],
  "pan": -0.3
}

效果按顺序处理，允许您构建复杂的音频处理链。使用从 -1（完全左）到 1（完全右）的 pan 值进行立体声定位。

组图层

group 图层是一个容纳子图层的容器。应用于组的变换会影响所有子图层，使得将复杂的多图层合成作为单个单元移动、缩放、旋转或动画化变得容易。

关键属性：

属性	描述
`children`	子图层对象数组

{
  "type": "group",
  "x": 200,
  "y": 150,
  "rotation": 5,
  "opacity": 0.9,
  "children": [
    {
      "type": "shape",
      "shapeType": "rectangle",
      "x": 0,
      "y": 0,
      "width": 500,
      "height": 300,
      "fill": "#1E293B",
      "borderRadius": 12
    },
    {
      "type": "text",
      "text": "卡片标题",
      "x": 24,
      "y": 24,
      "fontSize": 28,
      "fontWeight": 600,
      "color": "#F8FAFC"
    },
    {
      "type": "text",
      "text": "支持性描述文本放在这里。",
      "x": 24,
      "y": 64,
      "fontSize": 16,
      "color": "#94A3B8"
    }
  ]
}

组对于组织复杂模板非常有价值。使用它们创建可重用的卡片布局、下三分之一字幕、覆盖层和其他复合元素。子坐标相对于组的位置。

Lottie 图层

lottie 图层渲染从 After Effects、Figma 或其他动画工具导出的 Lottie 动画。

关键属性：

属性	描述	默认值
`source`	Lottie JSON 文件的 URL	必需
`speed`	播放速度倍数	`1`
`direction`	`1` 表示正向，`-1` 表示反向	`1`
`loop`	动画是否循环	`false`
`startFrame`	要播放的第一帧	`0`
`endFrame`	要播放的最后一帧	最后一帧

{
  "type": "lottie",
  "source": "https://cdn.example.com/loading-spinner.json",
  "x": 860,
  "y": 440,
  "width": 200,
  "height": 200,
  "speed": 1.5,
  "loop": true,
  "startFrame": 0,
  "endFrame": 60
}

Lottie 图层非常适合添加精美的运动图形、图标、加载指示器和品牌动画，无需编写逐帧代码。startFrame 和 endFrame 属性允许您修剪动画以仅播放特定片段。

自定义图层

custom 图层是 Rendervid 中最强大的图层类型。它允许您编写任意 React 组件来逐帧渲染，使您完全控制视觉输出。

自定义组件有三种部署类型：

内联部署

将 JavaScript 代码直接嵌入到 JSON 模板中。最适合小型、自包含的组件。

{
  "type": "custom",
  "deployment": {
    "type": "inline",
    "code": "function Component({ frame, fps, sceneDuration, layerSize, props }) { const progress = frame / (fps * sceneDuration); const size = 50 + progress * 100; return React.createElement('div', { style: { width: size, height: size, borderRadius: '50%', backgroundColor: props.color || '#6366F1', display: 'flex', alignItems: 'center', justifyContent: 'center' } }); }"
  },
  "props": {
    "color": "#EC4899"
  }
}

URL 部署

从外部 URL（如 CDN）加载组件。最适合跨模板共享的可重用组件。

{
  "type": "custom",
  "deployment": {
    "type": "url",
    "url": "https://cdn.example.com/components/animated-counter.js"
  },
  "props": {
    "startValue": 0,
    "endValue": 1000,
    "prefix": "$",
    "color": "#10B981"
  }
}

引用部署

按名称使用预注册的组件。最适合来自 @rendervid/components 包或自定义注册表的组件。

{
  "type": "custom",
  "deployment": {
    "type": "reference",
    "name": "AnimatedLineChart"
  },
  "props": {
    "data": [10, 25, 40, 35, 60, 80, 72, 95],
    "lineColor": "#6366F1",
    "gradientOpacity": 0.3
  }
}

每个自定义组件都接收一组标准属性：

属性	类型	描述
`frame`	`number`	当前帧号（从 0 开始）
`fps`	`number`	合成的每秒帧数
`sceneDuration`	`number`	当前场景的持续时间（秒）
`layerSize`	`{ width, height }`	图层的像素尺寸
`props`	`object`	模板中定义的任何自定义属性

自定义组件还支持属性的模式验证，确保模板将正确的数据类型和必需字段传递给每个组件。

预构建 React 组件

@rendervid/components 包附带一组可立即在模板中使用的生产就绪组件。

AnimatedLineChart

渲染具有平滑渐变填充、可配置数据点、轴标签和动画绘制效果的动画折线图。非常适合数据驱动的视频内容，如报告、仪表板和演示文稿。

关键属性： data、lineColor、gradientOpacity、strokeWidth、labels、animationStyle

AuroraBackground

使用分层渐变和流体运动创建迷人的北极光（极光）效果。非常适合氛围背景、介绍序列和环境视觉效果。

关键属性： colors、speed、intensity、blur

WaveBackground

生成具有可配置颜色、振幅和频率的流体波浪动画。用于时尚背景、音乐可视化器或海洋主题内容。

关键属性： waveCount、colors、amplitude、frequency、speed

SceneTransition

提供 17 种专业过渡类型用于在场景之间移动。包括擦除、淡入淡出、缩放、滑动等。每个过渡都是帧精确且可配置的。

关键属性： transitionType、duration、direction、easing

TypewriterEffect

渲染带有闪烁光标的逐字符文本显示。支持可配置的打字速度、光标样式和单词之间的延迟。非常适合代码演示、聊天模拟和戏剧性的文本显示。

关键属性： text、typingSpeed、cursorChar、cursorBlinkRate、startDelay

自定义组件开发

构建您自己的自定义组件是 Rendervid 真正闪耀的地方。您可以使用 JavaScript 和 CSS 创建的任何视觉效果都可以成为 Rendervid 组件。

组件结构

Rendervid 自定义组件是一个标准的 JavaScript 函数，它接收属性并返回一个 React 元素。与典型 React 组件的关键区别在于渲染是帧驱动而不是事件驱动。

function MyComponent({ frame, fps, sceneDuration, layerSize, props }) {
  // 计算动画进度（0 到 1）
  const totalFrames = fps * sceneDuration;
  const progress = frame / totalFrames;

  // 使用进度驱动动画
  const opacity = Math.min(progress * 2, 1);
  const scale = 0.5 + progress * 0.5;

  return React.createElement("div", {
    style: {
      width: layerSize.width,
      height: layerSize.height,
      opacity: opacity,
      transform: `scale(${scale})`,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      color: props.color || "#FFFFFF",
      fontSize: props.fontSize || 48,
      fontWeight: 700,
    },
  }, props.text || "你好，Rendervid！");
}

可用属性

每个自定义组件都接收这些标准属性：

frame – 当前帧号，从 0 开始。这是您的主要动画驱动器。
fps – 每秒帧数（通常为 30 或 60）。用它将帧转换为秒。
sceneDuration – 当前场景的持续时间（秒）。乘以 fps 得到总帧数。
layerSize – 一个包含 width 和 height（以像素为单位）的对象，与模板中定义的图层尺寸匹配。
props – 一个包含模板 JSON 中定义的任何自定义属性的对象。

React.createElement() 模式

由于 Rendervid 组件在渲染环境中运行，它们使用 React.createElement() 而不是 JSX。模式很简单：

// JSX 等效：<div className="container"><span>Hello</span></div>
React.createElement("div", { className: "container" },
  React.createElement("span", null, "Hello")
);

属性模式验证

您可以为组件的属性定义模式，以在模板加载时验证数据：

MyComponent.schema = {
  text: { type: "string", required: true },
  color: { type: "string", default: "#FFFFFF" },
  fontSize: { type: "number", default: 48, min: 8, max: 200 },
  animate: { type: "boolean", default: true },
};

示例：粒子系统

一个模拟 150+ 个具有物理效果的粒子的粒子系统组件：

function ParticleExplosion({ frame, fps, sceneDuration, layerSize, props }) {
  const particleCount = props.particleCount || 150;
  const gravity = props.gravity || 0.5;
  const time = frame / fps;

  const particles = [];
  for (let i = 0; i < particleCount; i++) {
    const angle = (i / particleCount) * Math.PI * 2;
    const speed = 2 + Math.random() * 4;
    const x = layerSize.width / 2 + Math.cos(angle) * speed * time * 60;
    const y = layerSize.height / 2 + Math.sin(angle) * speed * time * 60
              + gravity * time * time * 100;
    const opacity = Math.max(0, 1 - time / sceneDuration);
    const size = 3 + Math.random() * 5;

    particles.push(
      React.createElement("div", {
        key: i,
        style: {
          position: "absolute",
          left: x,
          top: y,
          width: size,
          height: size,
          borderRadius: "50%",
          backgroundColor: props.color || "#F59E0B",
          opacity: opacity,
        },
      })
    );
  }

  return React.createElement("div", {
    style: {
      position: "relative",
      width: layerSize.width,
      height: layerSize.height,
      overflow: "hidden",
    },
  }, ...particles);
}

示例：动画计数器

一个在开始值和结束值之间插值的数字计数动画：

function AnimatedCounter({ frame, fps, sceneDuration, layerSize, props }) {
  const progress = Math.min(frame / (fps * sceneDuration), 1);
  const eased = 1 - Math.pow(1 - progress, 3); // ease-out cubic
  const value = Math.round(
    props.startValue + (props.endValue - props.startValue) * eased
  );
  const formatted = value.toLocaleString();

  return React.createElement("div", {
    style: {
      width: layerSize.width,
      height: layerSize.height,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      fontSize: props.fontSize || 72,
      fontWeight: 800,
      color: props.color || "#FFFFFF",
      fontFamily: "Inter, sans-serif",
    },
  }, (props.prefix || "") + formatted + (props.suffix || ""));
}

有关自定义组件如何融入更广泛的模板结构的更多信息，请参阅模板系统文档。

模板编辑器

@rendervid/editor 包提供了一个功能齐全的可视化模板编辑器，使非开发人员和开发人员都能构建 Rendervid 模板，而无需手动编写 JSON。

基于时间轴的编辑

编辑器具有多轨时间轴，其中每个图层都表示为可以拖动、调整大小和重新定位的块。可视化调整开始时间、持续时间和图层顺序。放大以获得帧级精度，或缩小以获得高级概览。

图层管理面板

专用面板列出合成中的所有图层，具有拖放重新排序、可见性切换、锁定控制和分组功能。从包含所有 8 种内置类型和任何已注册自定义组件的组件面板添加新图层。

属性面板

选择任何图层以在结构化表单中查看和编辑其属性。属性面板适应图层类型，仅显示相关字段。颜色选择器、滑块、下拉菜单和文本输入使调整每个细节变得容易。更改立即反映在预览中。

撤消/重做历史记录

每个更改都记录在历史堆栈中，具有完整的撤消和重做支持。自信地浏览编辑历史，知道您始终可以恢复到以前的状态。

实时预览

编辑器包含一个嵌入式播放器组件，可在您进行更改时实时渲染模板。在编辑期间的任何时候预览完整的合成，无需导出或渲染。

播放器组件

@rendervid/player 包提供了一个独立的 React 组件，用于在浏览器中预览 Rendervid 模板。

React 集成

在任何 React 应用程序中安装并嵌入播放器：

import { Player } from "@rendervid/player";

function Preview({ template }) {
  return (
    <Player
      template={template}
      width={1920}
      height={1080}
      onComplete={() => console.log("播放完成")}
    />
  );
}

键盘快捷键

播放器支持内置键盘控制，可高效预览：

快捷键	操作
`空格`	播放 / 暂停
`左箭头`	后退一帧
`右箭头`	前进一帧
`M`	静音 / 取消静音

速度控制

从 0.25x（四分之一速度）到 4x（四倍速度）调整播放速度。慢动作播放对于逐帧查看动画很有用，而快进有助于浏览较长的合成。

回调和事件

播放器公开用于程序化控制的回调：

回调	描述
`onComplete`	播放到达结束时触发
`onFrameChange`	每帧触发，带有当前帧号
`onPlayStateChange`	播放/暂停状态更改时触发

使用这些回调将播放器与外部 UI 元素、分析或交互体验同步。

组件库

这些示例自定义组件展示了 Rendervid 的自定义图层类型的可能性范围。每一个都使用上面描述的相同 React.createElement() 模式构建。

粒子爆炸

基于物理的粒子系统，具有 150+ 个粒子、可配置的重力、颜色和爆炸半径。粒子从中心点生成并以真实的运动向外弧形运动。

波浪可视化

响应频率数据的音频反应波浪图案。多个具有可配置振幅、频率和颜色的波浪层创建动态、有机的视觉效果。

霓虹文字效果

带有动画霓虹灯效果的发光文本，包括闪烁、脉冲和颜色循环。可自定义发光半径、颜色和动画速度。

全息界面

科幻风格的全息 UI，带有扫描线、数据读出、网格覆盖和动画 UI 元素。非常适合科技主题视频和未来主义介绍。

3D 立方体旋转

硬件加速的 CSS 3D 立方体，带有纹理面和平滑旋转。使用 CSS perspective 和 transform3d 实现高性能 3D 渲染，无需 WebGL。

数据可视化仪表板

多图表仪表板组件，具有动画条形图、折线图和统计计数器。数据驱动且可配置，用于报告、演示文稿和数据叙事。

其他自定义组件示例包括：

动画计数器 – 带有缓动函数的数字计数动画
进度环 – 具有可配置弧度和颜色的圆形进度指示器
打字机 – 带有光标和可变速度的文本打字动画

下一步

了解Rendervid 模板系统以构建场景和合成
探索 AI 集成以使用自然语言生成模板
查看部署指南以渲染和导出最终视频
返回 Rendervid 概述获取高级介绍

常见问题

Rendervid 支持哪些图层类型？: Rendervid 支持 8 种内置图层类型：文本（具有 100+ 种字体的丰富排版）、图像（具有 cover/contain/fill 模式）、视频（具有播放控制）、形状（矩形、椭圆、多边形、星形、SVG 路径）、音频（具有混音效果）、组（用于嵌套图层）、lottie（用于 Lottie 动画）和自定义（用于 React 组件）。
自定义 React 组件在 Rendervid 中如何工作？: 自定义组件可以通过三种方式部署：内联（JavaScript 代码直接在 JSON 模板中）、基于 URL（从 CDN 加载）或作为预注册引用。每个组件接收 frame、fps、sceneDuration 和 layerSize 属性，以及您定义的任何自定义属性。组件使用 React.createElement() 进行渲染。
包含哪些预构建的 React 组件？: Rendervid 在 @rendervid/components 包中包含多个预构建组件：用于数据可视化的 AnimatedLineChart、用于北极光效果的 AuroraBackground、用于流体动画的 WaveBackground、用于 17 种专业过渡效果的 SceneTransition，以及用于逐字符文本显示的 TypewriterEffect。
Rendervid 包含可视化编辑器吗？: 是的，@rendervid/editor 包提供了一个完整的可视化模板编辑器，具有基于时间轴的编辑、图层管理、用于编辑图层属性的属性面板、撤消/重做历史记录和实时预览。@rendervid/player 包提供了一个独立的播放器组件用于预览模板。
我可以为 Rendervid 创建自己的自定义组件吗？: 当然可以。您可以编写自定义 React 组件来渲染逐帧动画。组件接收当前帧号、fps、场景持续时间和图层大小，使您完全控制程序化动画、物理模拟、数据可视化、粒子系统等。