SuperAPI AI 工具集

remotion-interactivity

通用与其它

查看项目

更新于 10-16 09:50

技能介绍

用途:指导在 Remotion 中以特定方式编写标记,使 Remotion Studio 能识别代码结构并提供交互编辑能力,例如点击选中元素、拖拽、缩放、旋转、编辑 CSS 样式,以及编辑关键帧与缓动值;结构过于复杂时相关值会置灰。

主要能力与用法:

  1. 自定义视觉组件(场景、卡片、标题等)使用 Interactive.withSchema({wrapInSequence: true}),并在 InteractivitySchema 中暴露内容与外观控制项,装饰性实现细节留在组件内部。组件需接收 style 并转发到唯一的视觉根节点。
  2. Schema 字段各有类型(如 text-content、number、boolean、color、enum、array、asset、font-family、font-weight、各类 transform、uv-coordinate、svg-path、remotion-captions、hidden 等),每项需 default 和 description;除 text-content 等外多数可设关键帧,可用 keyframable: false 固定。可展开内置片段如 Interactive.textSchema、Interactive.backgroundSchema、Interactive.borderRadiusSchema、Interactive.borderSchema、Interactive.captionsSchema。
  3. 独立可编辑项应各自拥有独立 JSX 节点,避免 .map() 循环导致多个运行项共享同一编辑目标(用于可视化柱状、粒子等模板化重复输出除外)。
  4. 用 Interactive.Div 等让 HTML/SVG 元素可交互(<Img> 已自动支持),并为元素添加描述性 name。
  5. 样式保持内联:直接传对象,不引用常量、不做对象展开和数学运算。动画以在属性上的内联 interpolate() 调用编写,输出范围、缓动、外插与输出属性使用硬编码值;输入范围可用从 useVideoConfig() 解构的 durationInFrames、fps、width、height。
  6. SVG 路径使用 Interactive.Path 保持可编辑;路径变形使用 @remotion/paths 的内联 interpolatePaths(),需先运行 bunx remotion add @remotion/paths。
  7. 优先使用 scale、translate、rotate 属性而非 transform;组合元数据保持内联,仅动态部分用 calculateMetadata()。

限制:非内联样式、对象展开、引用常量、任意变量数学运算均不被支持;不要在单个组件外套冗余 <Sequence>,需要共享时序、尺寸覆盖或组件不处理时序时保留;同一 JSX 节点生成的多个运行项共享编辑目标。

适用场景:需要在 Remotion Studio 中可视化编辑视频组件的结构与动画。其他细节暂未提供。