Remotion 速查
共 26 条 Remotion 常用写法，涵盖创建与结构、时间与动画、媒体与资源、渲染输出、进阶。 支持搜索与分类筛选，点击即可复制。
创建与结构
用 React 组件描述视频。
| 命令 | 说明 |
|---|---|
| 创建项目 | |
| 打开可视化预览（边改边看） | |
| 定义一个合成组件 | |
| 注册合成（时长/帧率/尺寸） | |
| 入口 |
时间与动画
帧驱动。
| 命令 | 说明 |
|---|---|
| 获取当前帧 | |
| 视频配置 | |
| 线性插值（可 extrapolate） | |
| 弹簧动画 | |
| 时间片段 | |
| 淡入 |
媒体与资源
图片、音频、视频。
| 命令 | 说明 |
|---|---|
| 图片（等待加载） | |
| 音频 | |
| 静态资源 | |
| 嵌入视频 | |
| 布局 |
渲染输出
命令行渲染。
| 命令 | 说明 |
|---|---|
| 渲染某个合成 | |
| 指定编码与质量 | |
| 输出 GIF | |
| 导出单帧图片 | |
| 渲染参数 |
进阶
参数校验与云渲染。
| 命令 | 说明 |
|---|---|
| 类型安全参数 | |
| 动态元数据 | |
| 云渲染 | |
| 带参数预览 | |
| 性能与并发 |
使用说明
Remotion 用 React 生成视频速查：创建与结构、时间与动画、媒体与资源、渲染输出、进阶；支持搜索与分类筛选，点击即可复制。
- 按用途点分类：创建与结构、时间与动画、媒体与资源、渲染输出、进阶。
- 点「写法」列复制，替换合成 id、时长与参数后使用。
- 动画用 interpolate / spring 基于当前帧计算，不要用 CSS 动画或 setTimeout。
- 渲染前先用 remotion studio 预览，导出用 remotion render 指定编码与质量。
常见问题
- 为什么不能用 CSS 动画做效果？
- Remotion 按帧渲染，每帧都是独立截图，CSS 动画不受帧驱动，导出会丢失。所有动画必须由 useCurrentFrame 计算出的属性控制。
- staticFile 是做什么的？
- 它把 public/ 目录下的资源解析为可访问路径，确保渲染时资源能被正确加载，图片、音频、视频都应通过它引用。
- interpolate 越界会怎样？
- 默认外插会继续线性延伸；一般加 extrapolateRight: "clamp" 让值在区间外保持不变，避免超出预期范围。