"什么是 Rendervid 模板格式?"

"Rendervid 模板是定义视频或图像的结构、内容、动画和输出设置的 JSON 文件。每个模板包括输出配置(尺寸、fps、时长)、动态变量的输入定义、包含场景和图层的合成,以及可选的字体和自定义组件配置。"

"Rendervid 中的模板变量如何工作?"

"模板变量使用 {{variableName}} 语法。您在模板的 inputs 数组中定义输入,包含 key、type(string、number、boolean、color、url、array)、label、description 和 default 值。在渲染时,这些变量会被实际值替换,使模板可重用且动态化。"

"Rendervid 有多少动画预设?"

"Rendervid 包含 40 多种内置动画预设,分为四类:入场动画(fadeIn、slideIn、scaleIn、bounceIn 等)、退场动画(fadeOut、slideOut、zoomOut 等)、强调动画(pulse、shake、bounce、swing、heartbeat 等),以及具有 30 多种缓动函数的完全可自定义关键帧动画。"

"有哪些场景过渡效果可用?"

"Rendervid 提供 17 种场景过渡类型:cut、fade、zoom、slide、wipe、push、rotate、flip(3D)、blur、circle、glitch、dissolve、cube(3D)、swirl、diagonal-wipe、iris 和 crosszoom。每种过渡效果都可以配置持续时间和方向参数。"

"Rendervid 支持哪些输出格式?"

"Rendervid 支持多种输出格式,包括视频的 MP4(H.264)、WebM(VP8/VP9)、MOV(ProRes)、GIF,以及图像的 PNG、JPEG、WebP。还支持 H.265/HEVC 和 AV1 等高级编解码器。分辨率最高支持 8K(7680x4320),帧率从 1 到 120 fps。"

"我可以在 Rendervid 模板中使用自定义字体吗?"

"可以,Rendervid 支持 100 多种内置 Google 字体,以及从 URL 加载 WOFF2、WOFF、TTF 和 OTF 格式的自定义字体。您可以指定 100-900 的字体粗细,并配置针对不同平台的备用字体以实现跨环境兼容性。"

Rendervid 模板系统 - JSON 模板、变量、动画与过渡效果

Rendervid 模板系统完整指南。学习如何创建 JSON 视频模板,使用 {{variable}} 语法的动态变量,配置 40 多种动画预设、17 种场景过渡效果和 30 多种缓动函数。

Rendervid Video Rendering Templates Open Source

Rendervid 是一个围绕声明式、基于 JSON 的模板系统构建的程序化视频渲染引擎。您无需在时间轴上手动编辑视频,而是在单个 JSON 文档中定义视频的各个方面——场景、图层、动画、过渡效果和输出设置。这种方法使模板无状态、可版本控制且可机器生成,为 AI 驱动的视频制作、批量渲染管道和完全自动化的内容工作流程打开了大门。

本指南从上到下全面介绍 Rendervid 模板系统:根级配置、输出设置、变量和输入系统、场景和合成、所有八种图层类型、40 多种动画预设、30 多种缓动函数、17 种场景过渡效果、视觉效果、字体配置和输出格式。

模板结构概述

每个 Rendervid 模板都是一个具有明确定义的根级字段集的 JSON 对象。以下是完整模板的框架:

{
  "name": "my-template",
  "output": { ... },
  "inputs": [ ... ],
  "composition": {
    "scenes": [ ... ]
  },
  "fonts": { ... },
  "customComponents": { ... },
  "defaults": { ... }
}

根级字段

字段	类型	必需	描述
`name`	string	是	人类可读的模板标识符
`output`	object	是	视频或图像输出配置(尺寸、fps、时长、格式)
`inputs`	array	否	模板变量的动态输入定义
`composition`	object	是	包含定义所有视觉内容的 `scenes` 数组
`fonts`	object	否	Google 字体和自定义字体声明
`customComponents`	object	否	注册的自定义图层组件
`defaults`	object	否	应用于所有图层的默认值,除非被覆盖

name 字段用于组织目的——不影响渲染。output 和 composition 字段是每个模板必须具有的两大支柱。其他所有内容都是可选的,但可以解锁强大的功能。

输出配置

output 对象控制最终渲染文件:其格式、尺寸、帧率、时长和背景色。

{
  "output": {
    "type": "video",
    "width": 1920,
    "height": 1080,
    "fps": 30,
    "duration": 10,
    "backgroundColor": "#000000"
  }
}

输出字段

字段	类型	默认值	描述
`type`	string	`"video"`	输出类型:`"video"` 或 `"image"`
`width`	number	`1920`	宽度(像素)(8K 最高 7680)
`height`	number	`1080`	高度(像素)(8K 最高 4320)
`fps`	number	`30`	每秒帧数(1-120)
`duration`	number	–	总时长(秒)
`backgroundColor`	string	`"#000000"`	背景色,十六进制、RGB 或命名颜色

常用预设

以下是流行格式的输出配置:

1080p 全高清(YouTube,通用):

{
  "type": "video",
  "width": 1920,
  "height": 1080,
  "fps": 30,
  "duration": 60,
  "backgroundColor": "#000000"
}

Instagram Reels / TikTok(9:16 竖屏):

{
  "type": "video",
  "width": 1080,
  "height": 1920,
  "fps": 30,
  "duration": 30,
  "backgroundColor": "#FFFFFF"
}

4K UHD:

{
  "type": "video",
  "width": 3840,
  "height": 2160,
  "fps": 60,
  "duration": 120,
  "backgroundColor": "#000000"
}

Open Graph / 社交分享图像:

{
  "type": "image",
  "width": 1200,
  "height": 630,
  "backgroundColor": "#1a1a2e"
}

对于图像输出,fps 和 duration 会被忽略——渲染器捕获单个帧。

模板变量与输入

输入和变量系统使 Rendervid 模板可重用。您无需将文本、颜色或 URL 硬编码到模板中,而是定义输入并在模板的任何位置使用 {{variableName}} 语法引用它们。

定义输入

输入在顶级 inputs 数组中声明。每个输入对象描述一个变量:

{
  "inputs": [
    {
      "key": "title",
      "type": "string",
      "label": "标题",
      "description": "在介绍场景中显示的主标题文本",
      "required": true,
      "default": "Hello World"
    },
    {
      "key": "brandColor",
      "type": "color",
      "label": "品牌颜色",
      "description": "用于背景和强调的主要品牌颜色",
      "required": false,
      "default": "#FF5733"
    },
    {
      "key": "showSubtitle",
      "type": "boolean",
      "label": "显示副标题",
      "description": "切换副标题可见性",
      "required": false,
      "default": true
    }
  ]
}

输入字段参考

字段	类型	必需	描述
`key`	string	是	在 `{{key}}` 引用中使用的唯一标识符
`type`	string	是	数据类型:`string`、`number`、`boolean`、`color`、`url`、`array`
`label`	string	否	用于 UI 渲染的人类可读标签
`description`	string	否	此输入控制内容的说明
`required`	boolean	否	渲染时是否必须提供输入
`default`	any	否	未提供输入时的回退值

输入类型

string – 自由格式文本。用于标题、描述、说明文字或任何文本内容。
number – 数值。用于时长、大小、位置、不透明度级别或计数。
boolean – 真/假切换。用于条件可见性、功能标志或开/关开关。
color – 十六进制(#FF5733)、RGB(rgb(255,87,51))或命名格式的颜色值。用于背景、文本颜色和强调色。
url – 有效的 URL 字符串。用于图像源、视频源、链接和字体 URL。
array – 值列表。用于图像库、文本列表、幻灯片内容或任何重复数据。

在模板中使用变量

定义输入后,在模板的任何位置使用双花括号引用它们:

{
  "type": "text",
  "text": "{{title}}",
  "style": {
    "color": "{{brandColor}}",
    "fontSize": "{{titleSize}}"
  }
}

变量在渲染时解析。当您调用 Rendervid API 或 CLI 时,传递实际值:

{
  "title": "2026 夏季促销",
  "brandColor": "#E63946",
  "titleSize": 72
}

完整输入示例

以下是一个包含多种输入类型协同工作的完整模板:

{
  "name": "product-promo",
  "output": {
    "type": "video",
    "width": 1080,
    "height": 1080,
    "fps": 30,
    "duration": 15
  },
  "inputs": [
    {
      "key": "productName",
      "type": "string",
      "label": "产品名称",
      "description": "正在推广的产品名称",
      "required": true,
      "default": "产品"
    },
    {
      "key": "price",
      "type": "number",
      "label": "价格",
      "description": "视频中显示的产品价格",
      "required": true,
      "default": 29.99
    },
    {
      "key": "productImage",
      "type": "url",
      "label": "产品图像 URL",
      "description": "产品图像的 URL",
      "required": true
    },
    {
      "key": "accentColor",
      "type": "color",
      "label": "强调色",
      "description": "用于 CTA 按钮和高亮的颜色",
      "required": false,
      "default": "#FF6B35"
    },
    {
      "key": "showBadge",
      "type": "boolean",
      "label": "显示促销徽章",
      "description": "是否显示促销徽章覆盖层",
      "required": false,
      "default": false
    },
    {
      "key": "features",
      "type": "array",
      "label": "产品特性",
      "description": "特性要点列表",
      "required": false,
      "default": ["特性 1", "特性 2", "特性 3"]
    }
  ],
  "composition": {
    "scenes": [
      {
        "name": "hero",
        "duration": 15,
        "layers": [
          {
            "type": "image",
            "src": "{{productImage}}",
            "position": { "x": 540, "y": 400 },
            "size": { "width": 600, "height": 600 }
          },
          {
            "type": "text",
            "text": "{{productName}}",
            "style": { "fontSize": 48, "fontWeight": 700, "color": "#FFFFFF" },
            "position": { "x": 540, "y": 80 }
          },
          {
            "type": "text",
            "text": "${{price}}",
            "style": { "fontSize": 64, "fontWeight": 900, "color": "{{accentColor}}" },
            "position": { "x": 540, "y": 900 }
          }
        ]
      }
    ]
  }
}

这个单一模板只需在渲染时更改输入值,就可以生成数千个独特的产品视频——无需修改模板。

场景与合成

composition 对象是视频内容所在的位置。它包含一个 scenes 数组,每个场景代表视频的一个独特片段,具有自己的时长、图层和过渡效果。

{
  "composition": {
    "scenes": [
      {
        "name": "intro",
        "duration": 5,
        "transition": {
          "type": "fade",
          "duration": 1
        },
        "layers": [ ... ]
      },
      {
        "name": "main-content",
        "duration": 20,
        "transition": {
          "type": "slide",
          "duration": 0.5,
          "direction": "left"
        },
        "layers": [ ... ]
      },
      {
        "name": "outro",
        "duration": 5,
        "layers": [ ... ]
      }
    ]
  }
}

场景字段

字段	类型	必需	描述
`name`	string	否	场景的标识符(用于可读性和调试)
`duration`	number	是	场景时长(秒)
`transition`	object	否	从前一个场景进入此场景时的过渡效果
`layers`	array	是	从下到上渲染的图层对象有序数组

场景按顺序播放。总视频时长是所有场景时长的总和(减去任何过渡重叠)。场景内的图层按数组顺序渲染——第一个图层位于视觉堆栈的底部,最后一个图层位于顶部。

如果未指定过渡效果,场景默认使用硬 cut。

图层系统

Rendervid 支持八种不同的图层类型。每种图层类型都有特定的用途,并在共享基础配置之上接受自己的一组属性。

共享图层属性

无论类型如何,每个图层都支持这些基本属性:

{
  "position": { "x": 100, "y": 100 },
  "size": { "width": 500, "height": 200 },
  "rotation": 0,
  "scale": { "x": 1, "y": 1 },
  "anchor": { "x": 0.5, "y": 0.5 },
  "opacity": 1,
  "blendMode": "normal",
  "from": 0,
  "duration": -1,
  "filters": [],
  "style": {},
  "className": ""
}

属性	类型	默认值	描述
`position`	object	`{x: 0, y: 0}`	X/Y 坐标(像素)
`size`	object	–	宽度和高度(像素)
`rotation`	number	`0`	旋转角度(度)
`scale`	object	`{x: 1, y: 1}`	X 和 Y 轴的缩放倍数
`anchor`	object	`{x: 0.5, y: 0.5}`	变换的锚点(0-1 范围,0.5 = 中心)
`opacity`	number	`1`	图层不透明度(0 = 透明,1 = 不透明)
`blendMode`	string	`"normal"`	用于合成的 CSS 混合模式
`from`	number	`0`	开始时间(秒)(相对于场景开始)
`duration`	number	`-1`	图层时长(秒)(-1 = 完整场景时长)
`filters`	array	`[]`	视觉滤镜对象数组
`style`	object	`{}`	其他类似 CSS 的样式属性
`className`	string	`""`	用于自定义样式的 CSS 类名

八种图层类型

text – 渲染样式化文本,完全控制字体、大小、颜色、对齐、行高、字母间距、文本阴影等。支持动态内容的 {{variable}} 语法。
image – 显示来自 URL 或本地路径的静态图像。支持裁剪、object-fit 模式、边框半径和图像滤镜。
video – 在场景中嵌入视频片段。支持修剪(开始/结束)、音量控制、播放速率、循环和静音。
shape – 渲染几何图元:矩形、圆形、椭圆、线条和多边形。支持填充、描边、边框半径、渐变和阴影。
audio – 向场景添加音频轨道。支持音量、淡入/淡出、修剪和循环。音频图层没有视觉表示。
group – 容纳子图层的容器图层。组允许您一次对多个图层应用变换、动画和效果。
lottie – 渲染 Lottie/Bodymovin JSON 动画。支持播放速度、循环和段控制以播放特定帧范围。
custom – 加载在 customComponents 字段中定义的注册自定义组件。用于可重用的参数化图层模板。

有关每种图层类型的详细配置,包括所有可用属性和代码示例,请参阅 Rendervid 组件参考。

动画系统

Rendervid 包含 40 多种内置动画预设,分为四类:entrance(入场)、exit(退场)、emphasis(强调)和 keyframe(关键帧)。动画附加到任何图层,控制该图层如何出现、消失或在其生命周期内的行为。

动画配置

{
  "type": "text",
  "text": "动画标题",
  "animations": [
    {
      "type": "entrance",
      "effect": "fadeInUp",
      "duration": 30,
      "delay": 10,
      "easing": "easeOutCubic",
      "loop": 0,
      "alternate": false
    }
  ]
}

动画字段

字段	类型	默认值	描述
`type`	string	–	动画类别:`entrance`、`exit`、`emphasis`、`keyframe`
`effect`	string	–	预设名称(例如 `fadeInUp`、`pulse`、`bounceOut`)
`duration`	number	`30`	持续时间(帧)
`delay`	number	`0`	动画开始前的延迟(帧)
`easing`	string	`"ease"`	缓动函数名称
`loop`	number	`0`	循环次数(0 = 不循环,-1 = 无限循环)
`alternate`	boolean	`false`	在交替循环中反转方向

入场动画(20 种预设)

入场动画控制图层如何出现在屏幕上。它们在达到图层的开始时间时运行一次。

预设	描述
`fadeIn`	简单的不透明度从 0 淡入到 1
`fadeInUp`	向上滑动时淡入
`fadeInDown`	向下滑动时淡入
`fadeInLeft`	从左侧滑入时淡入
`fadeInRight`	从右侧滑入时淡入
`slideInUp`	从帧下方滑入
`slideInDown`	从帧上方滑入
`slideInLeft`	从左边缘滑入
`slideInRight`	从右边缘滑入
`scaleIn`	从 0 缩放到完整大小
`zoomIn`	从较小的比例放大,略有过冲
`rotateIn`	从偏移角度旋转到位
`bounceIn`	带有弹性过冲弹跳到位
`flipInX`	X 轴上的 3D 翻转(水平翻转)
`flipInY`	Y 轴上的 3D 翻转(垂直翻转)
`typewriter`	字符逐个出现(文本图层)
`revealLeft`	从左侧滑动的遮罩显示
`revealRight`	从右侧滑动的遮罩显示
`revealUp`	向上滑动的遮罩显示
`revealDown`	向下滑动的遮罩显示

退场动画(9 种预设)

退场动画控制图层如何消失。它们在图层时长结束时运行。

预设	描述
`fadeOut`	简单的不透明度从 1 淡出到 0
`slideOutUp`	通过帧顶部滑出
`slideOutDown`	通过帧底部滑出
`scaleOut`	从完整大小缩小到 0
`zoomOut`	缩小到较小比例并淡出
`rotateOut`	旋转出位置到偏移角度
`bounceOut`	在消失前带有弹性过冲向外弹跳
`flipOutX`	X 轴上的 3D 翻出
`flipOutY`	Y 轴上的 3D 翻出

强调动画(10 种预设)

强调动画在图层保持可见时吸引注意力。它们与循环配合良好。

预设	描述
`pulse`	有节奏的缩放脉冲(增长和缩小)
`shake`	快速水平抖动
`bounce`	垂直弹跳运动
`swing`	类似钟摆的摇摆旋转
`wobble`	结合旋转和平移的偏轴摆动
`flash`	快速不透明度闪烁
`rubberBand`	弹性拉伸和回弹效果
`heartbeat`	双脉冲心跳节奏
`float`	轻柔的上下浮动运动
`spin`	连续 360 度旋转

关键帧动画

为了获得完全的创意控制,关键帧动画允许您定义自定义的逐帧属性变化:

{
  "type": "keyframe",
  "keyframes": [
    { "frame": 0, "opacity": 0, "x": -100 },
    { "frame": 15, "opacity": 1, "x": 0 },
    { "frame": 30, "opacity": 1, "x": 0 },
    { "frame": 45, "opacity": 0, "x": 100 }
  ],
  "easing": "easeInOutCubic"
}

关键帧动画可以为任何数值属性设置动画:opacity、x、y、rotation、scaleX、scaleY 等。每个关键帧指定一个帧号和该帧的属性值。渲染器使用指定的缓动函数在关键帧之间插值。

组合动画

单个图层可以有多个动画。例如,入场动画后跟强调循环,然后是退场动画:

{
  "animations": [
    {
      "type": "entrance",
      "effect": "fadeInUp",
      "duration": 20,
      "easing": "easeOutCubic"
    },
    {
      "type": "emphasis",
      "effect": "pulse",
      "duration": 30,
      "delay": 20,
      "loop": -1
    },
    {
      "type": "exit",
      "effect": "fadeOut",
      "duration": 15,
      "easing": "easeInCubic"
    }
  ]
}

缓动函数

缓动函数控制动画期间的变化率,决定运动是线性、平滑、弹跳还是弹性的感觉。Rendervid 包含 30 多种内置缓动函数。

基本缓动

函数	描述
`linear`	从开始到结束的恒定速度,无加速度
`ease`	默认的类似 CSS 的缓动,具有温和的加速和减速
`easeIn`	开始慢,向结束加速
`easeOut`	开始快,向结束减速
`easeInOut`	前半部分加速,后半部分减速

二次缓动

函数	描述
`easeInQuad`	二次加速(t^2)
`easeOutQuad`	二次减速
`easeInOutQuad`	二次加速然后减速

三次缓动

函数	描述
`easeInCubic`	三次加速(t^3)——比二次更明显
`easeOutCubic`	三次减速——平滑自然的停止感
`easeInOutCubic`	三次缓入和缓出——最常用的缓动

四次缓动

函数	描述
`easeInQuart`	四次加速(t^4)
`easeOutQuart`	四次减速
`easeInOutQuart`	四次缓入和缓出

五次缓动

函数	描述
`easeInQuint`	五次加速(t^5)——非常急剧的开始
`easeOutQuint`	五次减速——非常急剧的停止
`easeInOutQuint`	五次缓入和缓出

正弦缓动

函数	描述
`easeInSine`	基于正弦的加速——最温和的缓动曲线
`easeOutSine`	基于正弦的减速
`easeInOutSine`	基于正弦的缓入和缓出

指数缓动

函数	描述
`easeInExpo`	指数加速——几乎平坦然后急剧
`easeOutExpo`	指数减速——急剧然后几乎平坦
`easeInOutExpo`	指数缓入和缓出

圆形缓动

函数	描述
`easeInCirc`	圆形加速曲线
`easeOutCirc`	圆形减速曲线
`easeInOutCirc`	圆形缓入和缓出

回退缓动

函数	描述
`easeInBack`	在向前加速之前稍微后退(预期)
`easeOutBack`	超过目标然后回落(过冲)
`easeInOutBack`	进入时预期,退出时过冲

弹性缓动

函数	描述
`easeInElastic`	加速时的弹性摆动——类似弹簧的上紧
`easeOutElastic`	减速时的弹性摆动——类似弹簧的回弹
`easeInOutElastic`	两端都有弹性

弹跳缓动

函数	描述
`easeInBounce`	进入时的弹跳效果——像反向落下的球
`easeOutBounce`	退出时的弹跳效果——像球撞击地面
`easeInOutBounce`	两端都有弹跳

选择正确的缓动

UI 元素和文本:easeOutCubic 或 easeOutQuart 用于自然感的入场
吸引注意力的运动:easeOutElastic 或 easeOutBack 用于有趣的过冲
平滑循环:easeInOutSine 用于温和、连续的运动
戏剧性的显示:easeInExpo 用于构建,easeOutExpo 用于快速停止
物理模拟:easeOutBounce 用于类似重力的效果

场景过渡

过渡控制一个场景如何流入下一个场景。Rendervid 提供 17 种过渡类型,从简单的切换到电影般的 3D 效果。

过渡配置

{
  "name": "scene-two",
  "duration": 10,
  "transition": {
    "type": "fade",
    "duration": 1,
    "direction": "left"
  },
  "layers": [ ... ]
}

transition 对象放置在进入场景(被过渡到的场景)上。direction 属性仅适用于定向过渡,如 slide、wipe 和 push。

所有 17 种过渡类型

过渡	描述
`cut`	无视觉效果的即时切换(默认)
`fade`	场景之间的交叉淡化——传出场景淡出,传入场景淡入
`zoom`	放大传出场景,同时传入场景出现
`slide`	传入场景从可配置方向(左、右、上、下)滑过传出场景
`wipe`	硬边擦除显示传入场景,在给定方向上移动穿过帧
`push`	传入场景在指定方向上将传出场景推出屏幕
`rotate`	传出场景旋转离开,同时传入场景旋转进入
`flip`	3D 翻转过渡——帧像卡片一样翻转以显示下一个场景
`blur`	传出场景模糊,同时传入场景清晰聚焦
`circle`	圆形遮罩从中心(或指定点)扩展以显示下一个场景
`glitch`	带有色差和位移的数字故障失真效果
`dissolve`	像素级溶解,其中各个像素在场景之间随机过渡
`cube`	3D 立方体旋转——场景位于旋转立方体的相邻面上
`swirl`	螺旋失真,将传出场景旋转进入传入场景
`diagonal-wipe`	从一个角移动到对角的对角硬边擦除
`iris`	像相机光圈一样打开或关闭的圆形光圈
`crosszoom`	两个场景同时缩放——传出放大,传入缩小

过渡示例

带有长交叉淡化的电影淡入淡出:

{
  "transition": {
    "type": "fade",
    "duration": 2
  }
}

从右侧滑入(顺序内容常用):

{
  "transition": {
    "type": "slide",
    "duration": 0.5,
    "direction": "right"
  }
}

3D 立方体旋转(动态、现代感):

{
  "transition": {
    "type": "cube",
    "duration": 1
  }
}

故障效果(充满活力、技术前沿):

{
  "transition": {
    "type": "glitch",
    "duration": 0.3
  }
}

视觉效果

Rendervid 图层通过滤镜、混合模式、阴影和变换支持一系列视觉效果。

滤镜

滤镜通过任何图层上的 filters 数组应用。每个滤镜都是一个具有 type 和 value 的对象:

{
  "filters": [
    { "type": "blur", "value": 5 },
    { "type": "brightness", "value": 1.2 },
    { "type": "contrast", "value": 1.1 },
    { "type": "grayscale", "value": 0.5 },
    { "type": "saturate", "value": 1.5 }
  ]
}

滤镜	值范围	描述
`blur`	0+(像素)	高斯模糊——值越高模糊越多
`brightness`	0+(倍数)	0 = 黑色,1 = 正常,2 = 双倍亮度
`contrast`	0+(倍数)	0 = 灰色,1 = 正常,2 = 双倍对比度
`grayscale`	0-1	0 = 全彩,1 = 完全去饱和
`hue-rotate`	0-360(度)	在色轮周围旋转颜色
`invert`	0-1	0 = 正常,1 = 完全反转颜色
`saturate`	0+(倍数)	0 = 去饱和,1 = 正常,2 = 双倍饱和度
`sepia`	0-1	0 = 正常,1 = 全棕褐色调

混合模式

blendMode 属性控制图层如何与其下方的图层合成:

{
  "type": "shape",
  "blendMode": "multiply",
  "opacity": 0.8
}

支持的混合模式:normal、multiply、screen、overlay、darken、lighten、color-dodge、color-burn、hard-light、soft-light、difference、exclusion、hue、saturation、color、luminosity。

阴影

文本和形状图层通过 style 属性支持阴影效果:

{
  "style": {
    "shadow": {
      "color": "rgba(0, 0, 0, 0.5)",
      "offsetX": 4,
      "offsetY": 4,
      "blur": 10
    }
  }
}

组合效果

滤镜、混合模式、不透明度和阴影都可以在单个图层上组合,以实现复杂的视觉处理:

{
  "type": "image",
  "src": "{{backgroundImage}}",
  "opacity": 0.7,
  "blendMode": "overlay",
  "filters": [
    { "type": "blur", "value": 3 },
    { "type": "brightness", "value": 0.8 }
  ],
  "style": {
    "shadow": {
      "color": "rgba(0, 0, 0, 0.3)",
      "offsetX": 0,
      "offsetY": 10,
      "blur": 20
    }
  }
}

字体配置

Rendervid 支持 Google 字体(内置 100 多个字体系列)和从外部 URL 加载的自定义字体。

Google 字体

在 fonts.google 数组中声明 Google 字体:

{
  "fonts": {
    "google": [
      { "family": "Roboto", "weights": [400, 700] },
      { "family": "Open Sans", "weights": [300, 400, 600, 700] },
      { "family": "Montserrat", "weights": [400, 500, 700, 900] },
      { "family": "Playfair Display", "weights": [400, 700] }
    ]
  }
}

每个字体对象需要:

字段	类型	描述
`family`	string	Google 字体系列名称(需要精确匹配)
`weights`	array	要加载的数字粗细数组(100-900)

常见字体粗细:100(极细)、200(特细)、300(细)、400(常规)、500(中等)、600(半粗)、700(粗)、800(特粗)、900(黑)。

自定义字体

使用 fonts.custom 数组从外部 URL 加载字体:

{
  "fonts": {
    "custom": [
      {
        "family": "MyBrandFont",
        "src": "https://example.com/fonts/brand-font.woff2",
        "weight": 400,
        "style": "normal"
      },
      {
        "family": "MyBrandFont",
        "src": "https://example.com/fonts/brand-font-bold.woff2",
        "weight": 700,
        "style": "normal"
      }
    ]
  }
}

支持的字体格式:WOFF2(推荐用于最小文件大小)、WOFF、TTF 和 OTF。

在图层中使用字体

在文本图层样式中按系列名称引用声明的字体:

{
  "type": "text",
  "text": "{{headline}}",
  "style": {
    "fontFamily": "Montserrat",
    "fontWeight": 700,
    "fontSize": 64,
    "color": "#FFFFFF"
  }
}

Rendervid 包含针对不同平台的字体备用链,以确保在不同环境中一致的渲染。如果指定的字体不可用,渲染器会回退到匹配相同分类(serif、sans-serif、monospace)的系统字体。

输出格式

Rendervid 支持多种视频和图像渲染的输出格式和编解码器。

视频格式

格式	编解码器	文件扩展名	最适合
MP4	H.264	`.mp4`	最大兼容性——网页、移动设备、社交媒体
WebM	VP8 / VP9	`.webm`	网页嵌入,文件更小
MOV	ProRes	`.mov`	专业编辑工作流程,无损质量
GIF	–	`.gif`	短动画、社交分享、电子邮件
MP4	H.265 / HEVC	`.mp4`	较新设备,在相同质量下文件比 H.264 小 50%
WebM	AV1	`.webm`	下一代编解码器,最佳压缩效率

图像格式

格式	文件扩展名	最适合
PNG	`.png`	无损质量,支持透明度
JPEG	`.jpg`	照片,文件更小
WebP	`.webp`	现代网页,质量和大小的最佳平衡

质量预设

预设	描述
`draft`	快速渲染,质量降低——非常适合预览
`standard`	平衡质量和文件大小——适用于大多数用例
`high`	更高的比特率和质量——用于最终交付物
`lossless`	最高质量,无压缩伪影

分辨率支持

Rendervid 支持从小缩略图到 8K 的分辨率:

分辨率	尺寸	常见用途
SD	640 x 480	缩略图、预览
HD	1280 x 720	网页视频、电子邮件
Full HD	1920 x 1080	YouTube、演示文稿
2K	2560 x 1440	高质量显示器
4K UHD	3840 x 2160	专业、广播
8K	7680 x 4320	最大分辨率,面向未来

支持从 1 fps(幻灯片)到 120 fps(慢动作、游戏内容)的帧率。常见选择是 24 fps(电影)、30 fps(网页/社交)和 60 fps(流畅运动)。

完整示例

以下是一个完整的 Rendervid 模板,演示了模板系统的关键功能协同工作:动态输入、带过渡的多个场景、分层合成、带缓动的动画、字体和视觉效果。

{
  "name": "tech-product-launch",
  "output": {
    "type": "video",
    "width": 1920,
    "height": 1080,
    "fps": 30,
    "duration": 20,
    "backgroundColor": "#0A0A0A"
  },
  "inputs": [
    {
      "key": "productName",
      "type": "string",
      "label": "产品名称",
      "required": true,
      "default": "ProductX"
    },
    {
      "key": "tagline",
      "type": "string",
      "label": "标语",
      "required": true,
      "default": "未来就在这里。"
    },
    {
      "key": "heroImage",
      "type": "url",
      "label": "主图",
      "required": true
    },
    {
      "key": "primaryColor",
      "type": "color",
      "label": "主色",
      "default": "#6C63FF"
    },
    {
      "key": "ctaText",
      "type": "string",
      "label": "行动号召",
      "default": "了解更多"
    }
  ],
  "fonts": {
    "google": [
      { "family": "Inter", "weights": [400, 600, 800] },
      { "family": "JetBrains Mono", "weights": [400] }
    ]
  },
  "composition": {
    "scenes": [
      {
        "name": "intro",
        "duration": 6,
        "layers": [
          {
            "type": "shape",
            "shape": "rectangle",
            "position": { "x": 960, "y": 540 },
            "size": { "width": 1920, "height": 1080 },
            "style": {
              "fill": "{{primaryColor}}",
              "opacity": 0.1
            }
          },
          {
            "type": "text",
            "text": "{{productName}}",
            "position": { "x": 960, "y": 400 },
            "anchor": { "x": 0.5, "y": 0.5 },
            "style": {
              "fontFamily": "Inter",
              "fontWeight": 800,
              "fontSize": 96,
              "color": "#FFFFFF",
              "textAlign": "center"
            },
            "animations": [
              {
                "type": "entrance",
                "effect": "fadeInUp",
                "duration": 30,
                "delay": 15,
                "easing": "easeOutCubic"
              }
            ]
          },
          {
            "type": "text",
            "text": "{{tagline}}",
            "position": { "x": 960, "y": 520 },
            "anchor": { "x": 0.5, "y": 0.5 },
            "style": {
              "fontFamily": "Inter",
              "fontWeight": 400,
              "fontSize": 36,
              "color": "{{primaryColor}}",
              "textAlign": "center",
              "letterSpacing": 4
            },
            "animations": [
              {
                "type": "entrance",
                "effect": "fadeIn",
                "duration": 25,
                "delay": 40,
                "easing": "easeOutSine"
              }
            ]
          },
          {
            "type": "shape",
            "shape": "rectangle",
            "position": { "x": 960, "y": 600 },
            "size": { "width": 80, "height": 3 },
            "style": {
              "fill": "{{primaryColor}}"
            },
            "animations": [
              {
                "type": "entrance",
                "effect": "scaleIn",
                "duration": 20,
                "delay": 60,
                "easing": "easeOutQuart"
              }
            ]
          }
        ]
      },
      {
        "name": "product-showcase",
        "duration": 8,
        "transition": {
          "type": "slide",
          "duration": 0.8,
          "direction": "left"
        },
        "layers": [
          {
            "type": "image",
            "src": "{{heroImage}}",
            "position": { "x": 1200, "y": 540 },
            "size": { "width": 800, "height": 800 },
            "anchor": { "x": 0.5, "y": 0.5 },
            "filters": [
              { "type": "brightness", "value": 1.1 },
              { "type": "contrast", "value": 1.05 }
            ],
            "animations": [
              {
                "type": "entrance",
                "effect": "zoomIn",
                "duration": 40,
                "easing": "easeOutBack"
              },
              {
                "type": "emphasis",
                "effect": "float",
                "duration": 120,
                "delay": 40,
                "loop": -1,
                "alternate": true
              }
            ]
          },
          {
            "type": "text",
            "text": "隆重推出",
            "position": { "x": 400, "y": 350 },
            "anchor": { "x": 0.5, "y": 0.5 },
            "style": {
              "fontFamily": "JetBrains Mono",
              "fontSize": 18,
              "color": "{{primaryColor}}",
              "textTransform": "uppercase",
              "letterSpacing": 6
            },
            "animations": [
              {
                "type": "entrance",
                "effect": "typewriter",
                "duration": 30,
                "delay": 10,
                "easing": "linear"
              }
            ]
          },
          {
            "type": "text",
            "text": "{{productName}}",
            "position": { "x": 400, "y": 430 },
            "anchor": { "x": 0.5, "y": 0.5 },
            "style": {
              "fontFamily": "Inter",
              "fontWeight": 800,
              "fontSize": 72,
              "color": "#FFFFFF"
            },
            "animations": [
              {
                "type": "entrance",
                "effect": "revealLeft",
                "duration": 25,
                "delay": 20,
                "easing": "easeOutQuart"
              }
            ]
          },
          {
            "type": "text",
            "text": "{{tagline}}",
            "position": { "x": 400, "y": 520 },
            "anchor": { "x": 0.5, "y": 0.5 },
            "style": {
              "fontFamily": "Inter",
              "fontWeight": 400,
              "fontSize": 24,
              "color": "#CCCCCC",
              "lineHeight": 1.6
            },
            "animations": [
              {
                "type": "entrance",
                "effect": "fadeInUp",
                "duration": 20,
                "delay": 40,
                "easing": "easeOutCubic"
              }
            ]
          }
        ]
      },
      {
        "name": "cta",
        "duration": 6,
        "transition": {
          "type": "fade",
          "duration": 1.2
        },
        "layers": [
          {
            "type": "shape",
            "shape": "rectangle",
            "position": { "x": 960, "y": 540 },
            "size": { "width": 1920, "height": 1080 },
            "style": {
              "fill": "{{primaryColor}}",
              "opacity": 0.15
            }
          },
          {
            "type": "text",
            "text": "{{productName}}",
            "position": { "x": 960, "y": 380 },
            "anchor": { "x": 0.5, "y": 0.5 },
            "style": {
              "fontFamily": "Inter",
              "fontWeight": 800,
              "fontSize": 80,
              "color": "#FFFFFF",
              "textAlign": "center"
            },
            "animations": [
              {
                "type": "entrance",
                "effect": "bounceIn",
                "duration": 35,
                "easing": "easeOutElastic"
              }
            ]
          },
          {
            "type": "shape",
            "shape": "rectangle",
            "position": { "x": 960, "y": 550 },
            "size": { "width": 280, "height": 60 },
            "style": {
              "fill": "{{primaryColor}}",
              "borderRadius": 30
            },
            "animations": [
              {
                "type": "entrance",
                "effect": "scaleIn",
                "duration": 25,
                "delay": 30,
                "easing": "easeOutBack"
              },
              {
                "type": "emphasis",
                "effect": "pulse",
                "duration": 60,
                "delay": 60,
                "loop": -1,
                "alternate": true
              }
            ]
          },
          {
            "type": "text",
            "text": "{{ctaText}}",
            "position": { "x": 960, "y": 550 },
            "anchor": { "x": 0.5, "y": 0.5 },
            "style": {
              "fontFamily": "Inter",
              "fontWeight": 600,
              "fontSize": 22,
              "color": "#FFFFFF",
              "textAlign": "center"
            },
            "animations": [
              {
                "type": "entrance",
                "effect": "fadeIn",
                "duration": 20,
                "delay": 40,
                "easing": "easeOutSine"
              }
            ]
          }
        ]
      }
    ]
  }
}

该模板创建了一个 20 秒的产品发布视频,包含三个场景:带有交错文本动画的排版介绍、带有浮动图像和打字机效果的产品展示,以及带有脉冲按钮的结束行动号召场景。所有文本、颜色和图像都由模板变量驱动,使其完全可重用。

下一步

图层组件参考 – 深入了解 8 种图层类型,包含完整的属性文档和示例
AI 集成 – 学习如何使用 AI 生成和操作 Rendervid 模板,包括 LLM 驱动的模板生成和内容感知渲染
部署指南 – 为生产设置 Rendervid:服务器端渲染、云部署、批处理和 API 集成

常见问题

什么是 Rendervid 模板格式?: Rendervid 模板是定义视频或图像的结构、内容、动画和输出设置的 JSON 文件。每个模板包括输出配置(尺寸、fps、时长)、动态变量的输入定义、包含场景和图层的合成,以及可选的字体和自定义组件配置。
Rendervid 中的模板变量如何工作?: 模板变量使用 {{variableName}} 语法。您在模板的 inputs 数组中定义输入,包含 key、type(string、number、boolean、color、url、array)、label、description 和 default 值。在渲染时,这些变量会被实际值替换,使模板可重用且动态化。
Rendervid 有多少动画预设?: Rendervid 包含 40 多种内置动画预设,分为四类:入场动画(fadeIn、slideIn、scaleIn、bounceIn 等)、退场动画(fadeOut、slideOut、zoomOut 等)、强调动画(pulse、shake、bounce、swing、heartbeat 等),以及具有 30 多种缓动函数的完全可自定义关键帧动画。
有哪些场景过渡效果可用?: Rendervid 提供 17 种场景过渡类型:cut、fade、zoom、slide、wipe、push、rotate、flip(3D)、blur、circle、glitch、dissolve、cube(3D)、swirl、diagonal-wipe、iris 和 crosszoom。每种过渡效果都可以配置持续时间和方向参数。
Rendervid 支持哪些输出格式?: Rendervid 支持多种输出格式,包括视频的 MP4(H.264)、WebM(VP8/VP9)、MOV(ProRes)、GIF,以及图像的 PNG、JPEG、WebP。还支持 H.265/HEVC 和 AV1 等高级编解码器。分辨率最高支持 8K(7680x4320),帧率从 1 到 120 fps。
我可以在 Rendervid 模板中使用自定义字体吗?: 可以,Rendervid 支持 100 多种内置 Google 字体,以及从 URL 加载 WOFF2、WOFF、TTF 和 OTF 格式的自定义字体。您可以指定 100-900 的字体粗细,并配置针对不同平台的备用字体以实现跨环境兼容性。