SuperAPI AI 工具集

remotion-interactivity

设计与创作

查看项目

更新于 10-16 07:58

技能介绍

用途:按特定方式编写 Remotion 标记,使 Remotion Studio 能识别代码结构并使其可交互,包括点选元素、拖拽/缩放/旋转、编辑 CSS 样式、编辑关键帧与缓动值。若标记过于复杂,值会置灰。

主要能力:

  • 用 Interactive.withSchema({wrapInSequence: true, layout: 'absolute-fill'}) 包裹填满父级的组件,默认裁剪溢出,内部可返回 fragment;时序、预挂载、尺寸和每实例样式放在导出组件上。
  • Schema 字段支持 string、number、boolean、color、enum、array、asset、font-family、font-weight、translate、scale、rotation 系列、transform-origin、uv-coordinate、svg-path、remotion-captions、hidden 等类型;每个字段需 default 与 description,可设 keyframable: false。
  • 可展开内置片段 Interactive.textSchema、backgroundSchema、borderRadiusSchema、borderSchema、captionsSchema、childrenSchema。
  • 将可复用场景注册为 connected composition,使用与父级相同的导出组件引用,wrapInSequence: true 时无需额外 Sequence。
  • 时序直接放在组件上,避免多余 Sequence;保留为多个同级提供共享时序或子组件不支持时序时的 Sequence。
  • 每个可独立编辑项需单独 JSX 节点,map 循环仅适合整体控制的重复输出。
  • 任意 HTML/SVG 元素(除 Img)可用 Interactive 转为交互;内联文本优先,元素加描述性 name;CSS 全部内联,避免常量、展开与数学运算。
  • 动画写成内联 interpolate() 调用,输出范围、缓动、外推、输出属性用硬编码;输入范围可用 useVideoConfig() 解构的 durationInFrames、fps、width、height。
  • SVG 用 Interactive.Path,可安装 @remotion/paths(bunx remotion add @remotion/paths)并用内联 interpolatePaths() 变形。优先使用 scale、translate、rotate,避免 transform。

限制:嵌套标记与计算型 children 目前只读;text-content 为已弃用别名;childrenSchema 目前使用默认 '' 的字符串字段,组件若仅接受字符串 children 应显式声明 children: 'string';注册默认不会自动复制父实例 props;部分功能(如连接式合成的提取细节)资料中说明有限。