SuperAPI AI 工具集

remotion-interactivity

通用与其它

查看项目

更新于 10-15 23:41

技能介绍

用途:这是一套 Remotion 标记编写规范,目的是让 Remotion Studio 能识别代码结构并使其可交互,包括点击选中元素、拖拽/缩放/旋转、编辑 CSS 样式,以及编辑关键帧与缓动值。若标记过于复杂,Studio 无法交互,相关值会变灰。

主要能力与用法:

  1. 优先使用带自身时间轴的交互组件。对填满父级的组件使用 Interactive.withSchema({wrapInSequence: true, layout: 'absolute-fill'}),由包装器提供视觉根与时间轴项并默认裁剪溢出,内部组件可返回 fragment;把时间、预挂载、尺寸和每实例样式放在导出的组件上。
  2. schema 字段:每个键是 Studio 可在调用处读取和编辑的 prop,支持 string、number、boolean、color、enum、array、asset、font-family、font-weight、translate、scale、rotation-css、rotation-degrees、transform-origin、uv-coordinate、svg-path、remotion-captions、hidden 等类型,部分可关键帧化。每字段需 default 与 description;keyframable: false 显示静态控件。可用 Interactive.textSchema、backgroundSchema、borderRadiusSchema、borderSchema、captionsSchema、childrenSchema 等片段展开。
  3. 连接式合成:把有独立图层或动画的场景注册为独立 Composition,使用与父级相同的导出组件引用(如 component={Scene}),wrapInSequence: true 时无需额外 Sequence。
  4. 时间直接放在组件上:支持 name、from、durationInFrames、trimBefore、playbackRate、premountFor 等 prop,避免多余 Sequence;多个同级共享时间或子组件不处理时间时仍保留 Sequence。
  5. 每个可独立编辑项应有独立 JSX 节点;.map() 循环适合作为整体模板控制的重复输出,不适合需要独立 ID/名称/属性的实例。
  6. 用 Interactive.Div 等让 HTML/SVG 元素可交互;文本尽量内联;给交互元素加描述性 name;CSS 样式保持内联,不支持常量引用、对象展开和数学运算。
  7. 动画用内联 interpolate() 写在变化的属性上,输出范围、缓动、外推和输出属性用硬编码值;输入范围可用 useVideoConfig() 解构的 durationInFrames、fps、width、height。
  8. SVG 路径用 Interactive.Path 保持可编辑,需安装 @remotion/paths(bunx remotion add @remotion/paths);路径变形用内联 interpolatePaths(),不要用 interpolatePath() 或提取到变量。
  9. 使用 scale、translate、rotate CSS 属性,避免 transform。

限制:非内联样式、展开、常量引用、数学运算、任意变量均不被支持;嵌套标记与计算子节点目前只读;text-content 是 string 字段类型的已弃用别名。资料未提供收费、价格、平台与效果信息。