通过以特定方式编写 Remotion 标记，Remotion Studio 能够识别代码结构并使其具有交互性：

允许通过点击选择项目
允许拖放、调整大小和旋转
编辑 CSS 样式
使关键帧和缓动值可编辑

如果标记过于复杂，Studio 无法使其交互，则这些值将变灰显示。

优先使用带有独立时间线的可交互组件

使用 Track、连接合成和 Interactive.create() 构建新的合成。

对于场景，将 layout 明确设置为 'absolute-fill'；对于有界元素，设置为 'none'。使用 Composition 注册相同的导出场景和可复用元素组件。

从完整的 Track + 连接合成示例开始。它包含元素、场景、父时间线和根注册。

import {Track, useVideoConfig} from 'remotion';
import {Chapter} from './Chapter';

export const MyVideo = () => {
  const {fps} = useVideoConfig();

  return (
    <Track name="章节">
      <Chapter
        name="开场"
        durationInFrames={3 * fps}
        title="引言"
      />
      <Chapter
        name="功能"
        from={3 * fps}
        durationInFrames={4 * fps}
        title="新特性"
      />
    </Track>
  );
};

如完整示例所示，在每个场景实例上放置背景和对齐样式。将仅用于布局的容器保留为纯 HTML。

选择 Schema 字段

Schema 中的每个键都是一个属性，Studio 可以在调用处读取和编辑这些属性。不在 Schema 中的属性仍然有效，但在 Studio 中不可编辑。键可以使用点号表示法，例如 style.color。

类型	用途	可关键帧化
`string`	字符串，例如标题、提示或代码片段	否
`number`	数字，可选的 `min`、`max`、`step`、`integer`	是
`boolean`	开/关切换	是（保持）
`color`	CSS 颜色字符串	是
`enum`	在 `variants` 之间选择，每个变体有其自己的嵌套 Schema	选择性（保持）
`array`	数字、颜色、枚举等的列表	否
`asset`	媒体源，可选的 `assetType`	否
`font-family`	CSS 字体族	否
`font-weight`	字重	是
`translate`, `scale`, `rotation-css`, `rotation-degrees`, `transform-origin`	变换	是
`uv-coordinate`	元素上的归一化 `[x, y]` 点	是
`svg-path`	SVG 路径数据	是
`remotion-captions`	`Caption[]` 数据	否
`hidden`	保持在控件之外的值	—

每个字段都需要一个 default，并且应该有一个 description，Studio 将其显示为标签。设置 keyframable: false 可显示静态控件。

公开内容和每个实例的外观，例如文本和强调色。不要为 style.translate、style.scale、style.rotate、style.transformOrigin 和 style.opacity 添加字段：Interactive.create() 会自动添加它们。

要使根的 CSS 属性在每个实例中可编辑，展开内置的 Schema 片段：

const cardSchema = {
  ...Interactive.textSchema, // style.color, style.fontSize, style.fontWeight, ...
  ...Interactive.backgroundSchema, // style.backgroundColor
  ...Interactive.borderRadiusSchema, // style.borderRadius, ...
} as const satisfies InteractivitySchema;

还有 Interactive.borderSchema，以及用于接受字幕的组件的 Interactive.captionsSchema。对于接受 React.ReactNode 子元素的组件，添加 ...Interactive.childrenSchema。它提供子元素内容的控件，并可能在未来支持更丰富的内容。目前，它使用一个字符串字段，标签为“文本”，默认值为 ''。如果组件只接受字符串子元素，请改为声明一个显式的 children 字段，类型为 'string'。 Interactive.textSchema 控制排版样式；childrenSchema 控制内容。子元素片段不包含在 baseSchema 中，也不会自动添加到自定义组件中。嵌套标记和计算子元素目前是只读的。 text-content 是 string 字段类型的已弃用别名。有关所有选项，请参阅 InteractivitySchema。

将可复用组件注册为连接合成

将场景和可复用元素注册为独立的合成。Studio 将这些称为连接合成：它们可以在各自独立的时间线中打开，同时与父视频共享相同的组件实现。

在组件内部定义必需的样式和加载字体，以使其无需父组件即可工作。请参阅父独立性。

注册与父组件渲染的相同导出组件引用。对于上面的示例，使用 component={Chapter}，而不是 ChapterInner 或内联包装器。 Interactive.create() 提供序列，因此不需要额外的 <Sequence> 来建立连接。

import {Composition} from 'remotion';
import {Chapter} from './Chapter';

export const RemotionRoot = () => (
  <Composition
    id="Chapter"
    component={Chapter}
    width={1280}
    height={720}
    fps={30}
    durationInFrames={90}
    defaultProps={{
      title: '新视角',
      style: {
        backgroundColor: '#111111',
        justifyContent: 'center',
        alignItems: 'center',
      },
    }}
  />
);

选择唯一的 ID、具有代表性的内联默认值以及适合预览组件的尺寸、fps 和 duration。注册默认值不会自动从父实例复制属性。请参阅连接合成以了解注册和提取的详细信息。

将时间直接放在组件上

避免在一个已经接受时间属性的组件周围使用单独的 <Sequence>。使用 Interactive.create() 构建的内置交互组件和自定义组件可以直接接收 name、from、durationInFrames、trimBefore 和 playbackRate。

<Chapter
  name="开场场景"
  from={30}
  durationInFrames={90}
  style={{opacity: 0.9}}
  title="新视角"
/>

对于共享场景时间，将内容分组到一个使用 Interactive.create() 制作的组件中，并给该实例计时。托管根也接受 width 和 height，以供 useVideoConfig() 使用。

使用 <Track> 将项目放在同一个 Studio 时间线行上。当场景是顺序排列时，使用 <TransitionSeries>。

为每个独立可编辑的项目提供自己的 JSX 节点

Studio 编辑创建项目的 JSX 源节点。如果多个运行时项目来自同一个 JSX 节点，它们共享一个源编辑目标。

对于每个应独立编辑的组合注册、片段、场景、图层或序列，编写一个单独的 JSX 节点，并将可编辑属性保留在该节点上。这适用于 <Composition>、<Still>、内置媒体组件、<Sequence>、<TransitionSeries.Sequence> 和自定义组件。

例如，像这样编写一个可编辑的时间线：

import { Track } from "remotion";

<Track name="场景">
  <Introduction name="引言" durationInFrames={90} />
  <Demo name="演示" from={90} durationInFrames={150} />
</Track>

.map() 或其他程序化循环会从一个 JSX 源节点创建多个运行时项目。这适用于有意作为单个模板控制的重复输出，例如可视化条或粒子。但当实例需要独立的 ID 或名称、属性、元数据、时间、排序、在 Studio 中删除或复制时，这不适用。

使用 `Interactive` 使 HTML 元素可交互

每个 HTML 和 SVG 元素（除了 <Img>，它已经是交互式的）例如 <div>，都可以使用 Interactive 变为交互式：

<Interactive.Div
  name="问候卡"
  style={{fontSize: 80, padding: 24}}
>
  你好
</Interactive.Div>

这允许在 Studio 中设置样式和关键帧。要明智地使用，如果组件有很多元素，时间线可能会变得杂乱。

优先使用内联文本

如果文本是固定的并且只使用一次，请直接将其写在交互元素内部，而不是将其提取为常量。

// 👍 固定副本保持可编辑
<Interactive.Div name="标题">
  Remotion 最佳实践
</Interactive.Div>

只有在文本是动态或可复用时，才使用属性或变量。

为交互元素提供描述性名称

为元素添加 name 属性，使其易于识别。避免使用计算名称，请硬编码它们。

<>
  <Interactive.Div name="主标题" style={{fontSize: 80}}>
    发布日
  </Interactive.Div>
  <Img name="头像" src="https://remotion.media/image.jpeg" />
  <Video name="背景" src="https://remotion.media/video.mp4" />
  <Interactive.Div name="标题">
    发布日
  </Interactive.Div>
</>

将所有 CSS 样式保持内联

最好的方法是直接将普通对象传递给 style —— 不要引用常量、不要展开对象、不要进行数学运算。

<Interactive.Div
  style={{
    fontSize: 80,
    color: 'red',
  }}
>
  你好，世界！
</Interactive.Div>

const baseStyle = useMemo(() => {
  return {
    fontSize: 12 // ❌ 不支持非内联样式
  }
}, []);

<Interactive.Div
  style={{
    ...baseStyle, // ❌ 不支持展开
    color: RED, // ❌ 不支持引用常量
    scale: frame * 10 // ❌ 不支持数学运算
  }}
>
  你好，世界！
</Interactive.Div>

使用 `interpolate()` 实现动画

在发生变化的属性上，将动画编写为内联的 interpolate() 调用。 output range、easing、extrapolation 和 output 属性应使用硬编码值。

input range 还可以使用直接从 useVideoConfig() 解构的 durationInFrames、fps、width 和 height。支持裸标识符（如 durationInFrames）、与数字相乘（如 2 * fps 或 fps * 2）以及减去数字（如 durationInFrames - 1）。

const {fps, durationInFrames} = useVideoConfig();

// 👍 内联值可以被标准化和关键帧化
<Interactive.Div
  name="产品卡片"
  style={{
    color: 'white',
    fontSize: 80,
    scale: interpolate(frame, [0, fps], [0, 1], {
      easing: Easing.spring({damping: 200}),
      output: 'perceptual-scale',
      extrapolateLeft: 'clamp',
      extrapolateRight: 'clamp'
    }),
    rotate: interpolate(frame, [0, 1 * fps], ['0deg', '20deg'], {
      easing: Easing.spring({damping: 200}),
      extrapolateLeft: 'clamp',
      extrapolateRight: 'clamp'
    }),
    translate: interpolate(
      frame,
      [durationInFrames - 30, durationInFrames],
      ['0px 0px', '0px 120px'],
      {
        easing: Easing.spring({damping: 200}),
        output: 'perceptual-scale',
        extrapolateLeft: 'clamp',
        extrapolateRight: 'clamp'
      }
    ),
  }}
/>

const translateY = interpolate(frame, [0, 30], [0, 120]); // ❌ 数学运算应直接放在标记中

<Interactive.Div
  name="产品卡片"
  style={{
    translate: translateY, // ❌ 仅支持内联 interpolate() 调用,
    rotate: interpolate(frame, [start, start + 10], [0, Math.PI]), // ❌ 不能使用带有任意变量的数学运算，不能使用常量
    scale: interpolate(anyVariable, [0, 30], [0, 1]) // ❌ 只能解析 `frame` 变量。
  }}
/>

使用 `Interactive.Path` 保持 SVG 路径可编辑

使用来自 remotion 的 <Interactive.Path> 代替 SVG 中的 <path>，以使路径在视觉上可编辑。

安装 @remotion/paths 以实现路径插值和 Studio 路径关键帧：

bunx remotion add @remotion/paths

如果几何图形是静态的，请将路径字符串直接放在 d 属性中。不要将其提取为常量。

import {Interactive} from 'remotion';

<Interactive.Svg width={300} height={300} viewBox="0 0 300 300">
  <Interactive.Path
    name="三角形"
    d="M 40 40 L 260 40 L 150 260 Z"
    fill="#0b84f3"
  />
</Interactive.Svg>

iamhuynq/video-remotion

video-remotion 是什么？

在你喜欢的 AI 中提问

预览

文档