remotion-video

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	活泼的显现效果、Logo 弹跳
平滑	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 帧
折线描绘	使用 strokeDashoffset 动画绘制 SVG 路径
饼图／圆环图显现	动画化 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>

性能规则

1. 不要使用 useEffect 制作动画。 使用 useCurrentFrame() + interpolate()。
2. 对静态组件进行记忆化。 对不依赖帧的组件使用 React.memo。
3. 预加载资源。 本地资源使用 staticFile()，远程 URL 使用 prefetch()。
4. 将合成时长控制在 30s 以内，以便在开发期间快速迭代渲染。
5. 在目标分辨率下测试（1920x1080 或 1080x1080）后再进行最终渲染。

反模式

• 不要使用 CSS transition 或 animation——改用 Remotion 的 interpolate() 和 spring()
• 不要使用 setTimeout 或 setInterval——仅使用基于帧的计时
• 响应式布局不要使用绝对像素定位——使用 AbsoluteFill + flex
• 不要每帧都重新创建内联 style 对象——将其提取为常量或使用 useMemo
• 不要使用未受控的音频——始终明确设置 volume 和 startFrom

完整代码示例和合成模板请参阅 REFERENCE.md。