remotion-transitions

Remotion 自定义转场

本技能将教你如何使用 TransitionPresentation API 在 Remotion 中构建可用于生产环境、充满活力的自定义转场——Fyltr 的 Instagram Reel 宣传活动也采用了同样的模式。

快速参考

• 自定义转场模式 — TransitionPresentation API、组件的确切结构以及计时方式
• 转场目录 — 6 种经过实战检验的转场及其完整源码：条纹撞击、缩放重击、对角线揭示、翡翠爆发、垂直快门、故障撞击
• 动画数学 — 缓动函数、错开公式、弹簧配置，以及贯穿全文使用的 clamp 外推模式

核心概念

Remotion 的 @remotion/transitions 包提供了 TransitionPresentation 类型。你需要实现一个组件，接收：

• presentationProgress — 转场开始时为 0 → 转场结束时为 1
• presentationDirection — "exiting"（旧场景）或 "entering"（新场景）
• children — 被包装的场景

同一个组件会同时包装两个场景。你可以根据方向为不同内容添加动画。

黄金法则

1. 切勿使用 CSS 转场/动画——所有动效都通过由 presentationProgress 驱动的 interpolate() / spring() 实现
2. 切勿在转场组件内部使用 useCurrentFrame()——仅使用 presentationProgress
3. 始终返回 { component, props: {} }——即使 props 为空，也必须包含该对象
4. 在组件外部、模块级别创建实例，确保它们在重新渲染时保持稳定
5. 搭配 linearTiming（用于强调戏剧效果、帧级精准的转场）或 springTiming（用于具有弹簧物理效果的转场）

何时加载参考资料

• 构建新的自定义转场 → 首先加载 custom-transition-pattern.md
• 复制/调整现有效果 → 加载 transition-catalog.md
• 调试计时或缓动数学 → 加载 animation-math.md