Skip to main content

可视化编辑默认属性

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

你可以直观地编辑组件的默认属性，首先在你的 <Composition> 中注册一个 schema。

🌐 You can edit the default props of a component visually, first register a schema with your <Composition>.

打开默认属性编辑器​

🌐 Opening the default props editor

To open the default props editor, press the icon in the top right corner of the Remotion Studio to open the right sidebar. Alternatively, press Cmd/Ctrl + J to toggle the sidebar. Select the Props tab.

编辑默认属性​

🌐 Editing default props

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

🌐 Use the controls in the props editor to live-update the default props of your composition. If you have changes, an undo ↩️ button will appear which you can use to revert to your changes in the code.

支持的控件​

🌐 Supported controls

已为以下内容实现了控制：

🌐 Controls are implemented for:

  • 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）
  • zMatrix()（来自 @remotion/zod-types）
  • 通过在代码中输入 z.string() 并使用 staticFile() 来访问 staticFile() 资源
  • .min()
  • .max()
  • .step()

编辑 JSON​

🌐 Editing JSON

或者，你可以通过在属性编辑器中按 JSON 直接编辑 JSON 架构。如果架构无效，更改将不会生效。

🌐 Alternatively, you can edit the JSON schema directly by pressing JSON in the props editor. Changes will not apply if the schema is invalid.

将默认属性保存到你的代码中​

🌐 Saving default props to your code

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

🌐 Remotion can statically analyze your root file and allow you to save props back to the code via the 💾 button. For this to work, your default props must be inlined into your <Composition>:

Inlined defaultProps
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',
      }}
    />
  );
};

从你的输入渲染视频​

🌐 Rendering videos from your input

如果你想根据控件中的输入渲染视频，那么你无需将属性保存回代码。使用 Render 按钮打开渲染对话框，其中你的修改后的默认属性已作为输入属性填充。

🌐 If you would like to render a video based on your input in the controls, then you don't need to save the props back to the code. Use the Render button to open a render dialog where your modified default props are filled in as input props.

视觉上更改输入属性​

🌐 Changing input props visually

在属性编辑器中，你只能以可视方式编辑默认属性。然后你有机会使用calculateMetadata()函数来覆盖它们。 在渲染对话框中，你有机会更改输入属性。 它们也可以使用calculateMetadata()来覆盖。

🌐 In the Props editor, you can only edit the default props visually. You then have the chance to override them using the calculateMetadata() function.
In the Render dialog, you have the chance to change the input props.__ They can also be overridden using calculateMetadata().

Last updated on