remotion-interactivity

该技能介绍如何以特定方式编写 Remotion 标记，使 Remotion Studio 能识别代码结构并使其可交互：点击选中元素、拖放、缩放和旋转、编辑 CSS 样式、编辑关键帧和缓动值。如果标记过于复杂，Studio 无法使其交互，相应值会变灰。\n\n使用 Interactive 使元素可交互：除 <Img> 外，每个 HTML 和 SVG 元素（如 <div>）都可借助 Interactive 变为可交互，例如 <Interactive.Div name="Greeting card" style={{fontSize: 80, padding: 24}}>Hello</Interactive.Div>。这样可在 Studio 中设置样式和关键帧。若组件元素过多，时间线可能杂乱。\n\n优先内联文本：固定且仅用一次的文本应直接写在交互元素内，而非提取为常量；只有文本动态或复用时才用 prop 或变量。\n\n给交互元素描述性名称：添加 name prop 便于识别，避免计算名称，应硬编码。\n\n保持所有 CSS 样式内联：最好直接向 style 传普通对象——不引用常量、不展开对象、不做数学运算。非内联样式、展开、引用常量、数学运算均不支持。\n\n使用 interpolate() 制作动画：在变化的属性上写内联 interpolate() 调用；输出范围、缓动、外推和输出属性应使用硬编码值。输入范围还可使用从 useVideoConfig() 解构的 durationInFrames、fps、width、height；支持裸标识符（如 durationInFrames）、与数字相乘（如 2 * fps 或 fps * 2）以及减去数字（如 durationInFrames - 1）。只支持内联 interpolate() 调用；不能对任意变量做数学运算，不能用常量，只能解释 frame 变量。\n\n使用 scale、translate、rotate CSS 属性：避免 transform 属性；尽可能使用 scale、rotate 和 translate，因为只有它们可交互编辑。\n\n保持 composition 元数据内联：搭建 composition 时，让 width、height、fps、durationInFrames 和 defaultProps 保持内联，不做类型断言。当 defaultProps 是 <Composition> 或 <Still> 上的内联对象字面量时，Props 编辑器可将可视化编辑保存回代码。只对动态元数据部分使用 calculateMetadata()。\n\neffects 也应内联：effects 数组不应计算；设置关键帧的规则与 interpolate() 相同，所有值都应硬编码：输入范围、输出范围、缓动、外推、输出属性。若某版本应有 effects 而另一版本不应有，应渲染为单独元素。\n\n让自定义用户组件可交互：可使用 Make a component interactive。\n\n视频编辑：如果 Remotion 组件主要由视频和音频片段组成，请参阅 Video editing 中关于组织 Remotion 标记的最佳实践，以便片段在时间线中可交互编辑。