Skip to main content

通过可视化编辑默认属性

Also available as a 6min video
可视化编辑

您可以通过可视化方式编辑组件的默认属性，首先要使用您的<Composition>注册一个schema。

打开默认属性编辑器​

要打开默认属性编辑器，请按下右上角的 图标。或者，按Cmd/Ctrl + J 切换侧边栏。选择Props选项卡。

编辑默认属性​

使用属性编辑器中的控件实时更新您的合成的默认属性。如果有更改，将出现一个撤销 ↩️ 按钮，您可以使用它来恢复到代码中的更改。

支持的控件​

已实现以下控件：

  • z.object()
  • z.string()
  • z.date()
  • z.number()
  • z.boolean()
  • z.array()
  • z.union()（仅两种类型的联合，其中之一是z.null()或z.undefined()）
  • z.optional()
  • z.nullable()
  • z.enum()
  • zColor()（来自@remotion/zod-types）
  • zTextarea()（来自@remotion/zod-types）
  • staticFile() 通过将其类型定义为z.string()并在代码中使用staticFile()来处理静态文件
  • .default()

编辑 JSON​

或者，您可以通过在属性编辑器中按下JSON来直接编辑JSON模式。如果模式无效，则更改不会生效。

将默认 props 保存到您的代码中​

Remotion 可以静态分析您的根文件，并允许您通过 💾 按钮将 props 保存回代码中。为了使其工作，您的默认 props 必须内联到您的 <Composition> 中：

Inlined defaultProps
tsx
import React from "react";
import { Composition } from "remotion";
import { MyComponent, myCompSchema } from "./MyComponent";
 
export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="my-video"
      component={MyComponent}
      durationInFrames={100}
      fps={30}
      width={1920}
      height={1080}
      schema={myCompSchema}
      defaultProps={{
        propOne: "Hello World",
        propTwo: "Welcome to Remotion",
      }}
    />
  );
};
Inlined defaultProps
tsx
import React from "react";
import { Composition } from "remotion";
import { MyComponent, myCompSchema } from "./MyComponent";
 
export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="my-video"
      component={MyComponent}
      durationInFrames={100}
      fps={30}
      width={1920}
      height={1080}
      schema={myCompSchema}
      defaultProps={{
        propOne: "Hello World",
        propTwo: "Welcome to Remotion",
      }}
    />
  );
};

从您的输入中渲染视频​

如果您想要根据您的输入渲染视频，则无需将 props 保存回代码中。使用 Render 按钮打开渲染对话框，在那里您修改后的 默认 props 将作为输入 props 填充。

在视觉上更改输入 props​

在 Props 编辑器中，您只能通过视觉方式编辑 默认 props。然后，您有机会使用 calculateMetadata() 函数覆盖它们。
在 渲染对话框 中，您有机会更改输入 props。__
它们也可以使用 calculateMetadata() 进行覆盖。