Remotion 视频制作
使用 Remotion 构建程序化视频的最佳实践——动画、过渡、图表和渲染。
安装
git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/remotion-video ~/.claude/skills/
核心功能
- 弹簧动画预设（弹跳、平滑、干脆、交错）
- 插值模式（相机缩放、视差、滚动模拟）
- SVG 绘制动画（路径追踪、描边显现）
- 通过 TransitionSeries 实现场景过渡
- AbsoluteFill 分层合成
- 图表动画（条形增长、折线绘制、饼图显现、数字计数）
- 音频集成与同步
- 渲染配置
弹簧预设
使用 Remotion 的 spring() 实现基于物理的动画：
| 预设 | 配置 | 使用场景 |
|---|---|---|
| 弹跳 | mass: 0.5, damping: 8, stiffness: 120 | 有趣的显现、标志弹跳 |
| 平滑 | mass: 1, damping: 15, stiffness: 80 | UI 过渡、滑入效果 |
| 干脆 | mass: 0.8, damping: 20, stiffness: 200 | 快速交互、切换效果 |
| 交错 | 任何预设，每项添加帧偏移 | 列表显现、网格动画 |
import { spring, useCurrentFrame, useVideoConfig } from "remotion";
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const scale = spring({
frame,
fps,
config: { mass: 0.5, damping: 8, stiffness: 120 },
});
插值模式
相机缩放
import { interpolate } from "remotion";
const zoom = interpolate(frame, [0, 30], [1, 1.5], {
extrapolateRight: "clamp",
});
视差图层
const bgX = interpolate(frame, [0, 100], [0, -50]);
const fgX = interpolate(frame, [0, 100], [0, -150]);
滚动模拟
const scrollY = interpolate(frame, [0, 90], [0, -800], {
extrapolateRight: "clamp",
});
SVG 绘制动画
通过动画化 strokeDashoffset 来显现 SVG 路径：
const pathLength = 500;
const draw = interpolate(frame, [0, 60], [pathLength, 0], {
extrapolateRight: "clamp",
});
<path
d="..."
strokeDasharray={pathLength}
strokeDashoffset={draw}
/>
图表动画模式
| 模式 | 技术 |
|---|---|
| 条形增长 | 高度从 0 动画到目标值，每项间隔 3-5 帧 |
| 折线绘制 | SVG 路径配合 strokeDashoffset 动画 |
| 饼图/环图显现 | 动画化 conic-gradient 停止点或 SVG 弧线路径 |
| 数字计数 | 从 0 插值到目标值，使用 Math.round() 显示 |
场景过渡
import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";
<TransitionSeries>
<TransitionSeries.Sequence durationInFrames={90}>
<SceneOne />
</TransitionSeries.Sequence>
<TransitionSeries.Transition
timing={linearTiming({ durationInFrames: 15 })}
presentation={fade()}
/>
<TransitionSeries.Sequence durationInFrames={90}>
<SceneTwo />
</TransitionSeries.Sequence>
</TransitionSeries>
性能规则
- 动画中不要使用
useEffect。 应使用useCurrentFrame()+interpolate()。 - 对静态组件使用记忆化。 对于不依赖帧的任何组件，使用
React.memo。 - 预加载资源。 本地资源使用
staticFile()，远程 URL 使用prefetch()。 - 开发时保持合成时长在 30 秒以内，以便快速迭代渲染。
- 在最终渲染前以目标分辨率（1920x1080 或 1080x1080）测试。
反模式
- 不要使用 CSS
transition或animation—— 应使用 Remotion 的interpolate()和spring() - 不要使用
setTimeout或setInterval—— 仅使用基于帧的时间控制 - 响应式布局中不要使用绝对像素定位 —— 应使用
AbsoluteFill+ flex - 不要在每帧重新创建内联
style对象 —— 提取为常量或使用useMemo - 不要使用不受控的音频 —— 始终设置明确的
volume和startFrom
完整的代码示例和合成模板，请参见 REFERENCE.md。