remotion-animation

Remotion 动画

将所有动画知识汇集于一个技能中：规则（原子配方）、蓝图（多阶段场景模板）、转场（场景间转场）和 技巧（更广泛的动画设计模式）。

关于合成约定（useCurrentFrame、Sequence、确定性），请参阅 remotion-core。

默认做法：组合原子规则

从 rules-index.md 中选取 2–4 条规则，通过一次 useCurrentFrame() 调用搭配 interpolate() 和 spring() 实现，即可完成。相比从蓝图开始，这样更快，代码也更少。

以下情况加载蓝图

• 场景符合现有的预设计多阶段模板（brand-reveal、data-story、social-proof 等），复用其阶段流程可以显著节省编写时间
• 需要复杂的 4–5 阶段编排的可运行可靠代码

蓝图位于 blueprints-index.md 中。每个条目都指向 blueprints/<id>.md（配方）。只有在确定需要场景级编排时才加载。

路由

需求	阅读
按触发条件／标签挑选原子动画模式	rules-index.md
阅读单条规则的完整 TSX 配方	rules/<name>.md
挑选多阶段场景模板	blueprints-index.md
阅读单个蓝图的完整配方	blueprints/<id>.md
编写场景转场（由 interpolate 驱动，位于两个 Sequence 之间）	transitions/overview.md、transitions/catalog.md
查找更广泛的动画设计技巧	techniques.md
spring() — 物理参数配置、阻尼、刚度、质量	adapters/spring.md
interpolate() — 外推、输入／输出范围、限幅	adapters/interpolate.md
交错 — 索引延迟模式、spring 交错	adapters/stagger.md
文本动画 — 逐词、逐字符、逐行显示	adapters/text-animation.md
SVG 路径动画、描边绘制、通过 CSS 变形形状	adapters/svg.md
Three.js / R3F — React 中的 3D 场景、AnimationMixer 定位	adapters/three.md
Lottie — 通过 @remotion/lottie 使用 After Effects 导出内容	adapters/lottie.md

多种基本动画方式可以在一个合成中共存。它们都基于同一个 useCurrentFrame()。

关键约束

前提：remotion-core → 不可妥协的规则（帧确定性；不使用 Math.random、Date.now、用于时间线同步动画的 CSS transitions，也不使用 useState／useEffect 控制视觉属性；所有值都必须从 useCurrentFrame() 推导）。

在 core 的约定基础上，动画制作还有以下要求：

• 预先计算布局常量 — 渲染时绝不调用 getBoundingClientRect()。并行帧渲染期间 DOM 测量不可靠；应改用 useVideoConfig() 根据合成的 width／height 计算坐标
• 空间动画使用 React 内联样式 — 使用 transform: translateX(${x}px)，而非 left／top（避免重新计算布局）
• spring() 不会在不同时间重新求值 — 相同的 frame 和配置始终返回相同的值
• interpolate() 在进场／退场时使用 clamp 外推，防止值超出场景边界

核心动画模式

使用 spring 实现进场

const frame = useCurrentFrame();
const {fps} = useVideoConfig();

const scale = spring({frame, fps, config: {damping: 12, stiffness: 200}});
const opacity = interpolate(frame, [0, 15], [0, 1], {extrapolateRight: 'clamp'});

定时插值

const x = interpolate(frame, [30, 60], [-200, 0], {
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

交错模式

const items = ['A', 'B', 'C', 'D'];
// Each item enters 8 frames after the previous
const getItemSpring = (index: number) =>
  spring({frame: frame - index * 8, fps, config: {damping: 200}});

场景退场

const {durationInFrames} = useVideoConfig();
const exitStart = durationInFrames - 20;
const opacity = interpolate(frame, [exitStart, durationInFrames], [1, 0], {
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

另请参阅

• remotion-core — 合成结构、确定性约定、Sequence、媒体元素
• remotion-creative — 调色板、排版、旁白、节拍规划
• remotion-cli — npx remotion render / studio / lambda
• remotion-keyframes — 详细的弹簧配置、插值方案、高级交错