← 返回目录

Remotion 程序化视频制作完整指南

visual_Production · 2026-05-17

📋 元数据
id20260517-vis-01
created2026-05-17
last_reviewed2026-05-17
expires2027-05-17
related[20250129-vis-04]

Remotion 程序化视频制作完整指南

TL;DR

Remotion 是用 React 代码写视频的框架，通过 registerRoot() 注册入口、useCurrentFrame() 获取帧号、interpolate() 和 spring() 做动画、Sequence 控制播放顺序。适合程序化生成动态文字动画、数据可视化、参数化批量模板。

核心概念速览

| 概念 | 说明 |

|------|------|

| Composition | 视频配置（fps、duration、width、height） |

| registerRoot() | 注册根组件，必须使用 |

| useCurrentFrame() | 获取当前帧编号（0 开始） |

| useVideoConfig() | 获取 fps、duration 等配置 |

| interpolate() | 在两值之间根据帧号插值（动画核心） |

| spring() | 弹簧动画，比 interpolate 更自然 |

| AbsoluteFill | 填满整个视频区域的容器 |

| Sequence | 时间轴组件，控制子元素播放顺序和时间偏移 |

| staticFile() | 引用静态资源（图片、音频等） |

触发场景

行动步骤

1. 项目初始化（手动搭建，绕过交互式 CLI）


mkdir -p my-remotion/src/HelloWorld my-remotion/public
cd my-remotion
npm init -y
npm install remotion @remotion/cli react react-dom

2. 配置 package.json scripts


{
  "scripts": {
    "start": "remotion studio src/index.tsx",
    "build": "remotion render src/index.tsx MyVideo out.mp4",
    "preview": "remotion preview src/index.tsx"
  }
}

3. 入口文件必须用 .tsx（不是 .ts）


import { registerRoot } from "remotion";
import React from "react";
import { Composition } from "remotion";
import { HelloWorld } from "./HelloWorld/Title";

registerRoot(() => {
  return (
    <>
      <Composition
        id="MyVideo"
        component={HelloWorld}
        durationInFrames={150}   // 5秒 @ 30fps
        fps={30}
        width={1920}
        height={1080}
        defaultProps={{
          titleText: "Hello World",
          subtitleText: "Remotion First Try",
        }}
      />
    </>
  );
});

4. 核心动画 API


// 获取当前帧
const frame = useCurrentFrame();
const { fps, durationInFrames } = useVideoConfig();
const seconds = frame / fps;

// 插值动画（0-30帧映射到 0-100）
const left = interpolate(frame, [0, 30], [0, 100]);

// 弹簧动画（更自然）
const titleY = spring({ frame, fps, config: { damping: 200, stiffness: 200, mass: 0.5 } });

// Sequence 配合
<AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
  <Sequence from={0} durationInFrames={75}>
    <Title />
  </Sequence>
  <Sequence from={20} durationInFrames={75}>
    <Subtitle />
  </Sequence>
</AbsoluteFill>

5. 渲染命令


# 启动 Studio 预览
npx remotion studio src/index.tsx

# 列出所有 compositions
npx remotion compositions src/index.tsx

# 渲染静态帧（测试用）
npx remotion still src/index.tsx MyVideo out.png --frame=30

# 渲染视频
npx remotion render src/index.tsx MyVideo out.mp4

# 带参数渲染
npx remotion render src/index.tsx MyVideo out.mp4 \
  --props='{"titleText":"Custom Title"}'

证据

失败边界

易混淆场景

原理

Remotion 本质是将 React 组件树映射为视频帧序列，通过帧号驱动动画函数（interpolate/spring）实现时间维度上的连续变化。每一帧都是Pure function，无副作用，天然支持并发渲染。

关联与延伸

使用记录

| 日期 | 项目/场景 | 结果 | 备注 |

|------|----------|------|------|

| 2026-05-17 | 初始整理 | - | 从 0-Inbox 迁入 |

附件