在 Remotion Studio 中让 Remotion…

适用于用 Remotion 制作视频并希望在 Remotion Studio 中直接点选、拖拽、调整大小/旋转、编辑 CSS 样式和关键帧的场景。

适用场景

解决思路

1. 用 `Interactive` 包裹 HTML/SVG 元素使其可交互：除 `<Img>` 已经可交互外，`<div>` 等元素可写成 `Interactive.Div`，并设置 `name` 和 `style`，从而在 Studio 中编辑样式和关键帧。
2. 组件元素很多时不要把所有元素都设为交互式，否则时间线可能变得杂乱。
3. 固定且只使用一次的文本直接写在交互元素内部，不要提取成常量；仅当文本是动态的或被复用时，才使用 prop 或变量。
4. 给交互元素添加描述性 `name` 属性，便于识别；避免计算出来的名称，直接硬编码名称。
5. 所有 CSS 样式保持内联：直接给 `style` 传普通对象。
6. 不要引用外部常量作为样式值。
7. 不要用对象展开（spreading）合并样式。
8. 不要在样式中做数学运算。
9. 用 `interpolate()` 做动画：在发生变化的属性上直接写内联 `interpolate()` 调用。
10. `interpolate()` 的 output range、easing、extrapolation 和 `output` 属性都使用硬编码值。
11. `interpolate()` 的 input range 可以额外使用从 `useVideoConfig()` 直接解构出的 `durationInFrames`、`fps`、`width`、`height`。
12. `interpolate()` 的 input range 支持裸标识符如 `durationInFrames`、与数字相乘如 `2 * fps` 或 `fps * 2`、减去数字如 `durationInFrames - 1`。
13. 不要把 `interpolate()` 的结果先赋给变量再放进 `style`，也不要用任意变量或常量参与计算；Studio 只能解释 `frame` 变量。
14. 使用 `scale`、`translate`、`rotate` CSS 属性，避免使用 `transform`，因为只有它们可交互编辑。
15. 创建 composition 时保持元数据内联：在 `<Composition>` 或 `<Still>` 上内联 `width`、`height`、`fps`、`durationInFrames` 和 `defaultProps`，并不要做类型断言。
16. 当 `defaultProps` 是 `<Composition>` 或 `<Still>` 上的内联对象字面量时，Props editor 可以把视觉编辑保存回代码。
17. 不要把 `defaultProps` 提取到外部常量，必须内联。
18. 没有实际计算时不要使用 `calculateMetadata()`。
19. 只把动态元数据交给 `calculateMetadata()`；静态值放在 `<Composition>`，动态值放在 `calculateMetadata()`。
20. 不要把 `defaultProps` 用 `as Props` 做类型断言，而应正确给 `MyComponent` 类型。
21. `effects` 数组不要计算出来，应保持内联。
22. `effects` 中的参数要内联，且数组形状保持稳定。
23. `effects` 的关键帧规则同 `interpolate()`：input range、output range、easing、extrapolation、`output` 属性全部硬编码。
24. 不要使用条件 `effects`（如 `enabled ? [...] : []`），因为它不可动画。
25. 如果某个版本需要 `effects`、另一个版本不需要，就渲染成独立元素。
26. 当使用 `Interactive.withSchema()` 自定义交互组件时，在 schema 中包含 `Interactive.baseSchema`，以保留 trimming 和 visibility 等标准时间线控件。
27. 要让自定义 userland 组件可交互，按「Make a component interactive」文档操作。
28. 如果 Remotion 组件主要由视频和音频片段组成，参考「Video editing」最佳实践来组织 markup，使片段在时间线中可交互编辑。

适用边界 · 注意事项

• 不使用 Remotion Studio 的交互式编辑功能，或不需要在 Studio 中点选、拖拽、编辑样式和关键帧时，不必强制采用这些结构。
• 组件包含大量元素时，不要把所有元素都设为交互式，否则时间线会混乱。
• 如果组件主要由视频和音频片段组成，应改用 Remotion 的「Video editing」最佳实践，而不是套用本文的通用交互结构。