Skip to main content

<组合>

这是用于注册视频以使其可渲染并显示在 Remotion 开发界面侧边栏中的组件。

一个组合代表您想要创建的视频,作为一系列剪辑(例如,几个 <Sequence>),这些剪辑将依次播放以形成您的视频。

src/Root.tsx
tsx
import { Composition } from "remotion";
 
export const RemotionRoot: React.FC = () => {
return (
<>
<Composition
component={Component}
durationInFrames={300}
width={1080}
height={1080}
fps={30}
id="test-render"
defaultProps={{}}
/>
{/* Additional compositions can be rendered */}
</>
);
};
src/Root.tsx
tsx
import { Composition } from "remotion";
 
export const RemotionRoot: React.FC = () => {
return (
<>
<Composition
component={Component}
durationInFrames={300}
width={1080}
height={1080}
fps={30}
id="test-render"
defaultProps={{}}
/>
{/* Additional compositions can be rendered */}
</>
);
};

API

应该将 <Composition /> 放置在根组件的片段中(根组件是使用 registerRoot() 注册的)。

该组件接受以下 props:

id

组合的 ID,在侧边栏中显示,也是您需要指定的组合的唯一标识符,如果要渲染它,则需要指定 ID。ID 只能包含字母、数字和 -

fps

组合应该以多少帧渲染。

durationInFrames

组合应该有多少帧长。

height

组合的高度(以像素为单位)。

width

组合的宽度(以像素为单位)。

component lazyComponent

直接传递组件 传递返回动态导入的函数。传递这两个 props 中的任何一个或两个都将导致错误。

note

如果使用 lazyComponent,Remotion 将使用 React Suspense 加载组件。组件将根据需要由 Webpack 编译,这将减少 Remotion 的启动时间。如果使用 lazyComponent,您需要为组件使用默认导出。这是 React Suspense 的限制。

defaultProps

可选

为您的组件提供默认 props。默认 props 可以使用 Props 编辑器Input Props 进行覆盖。

Props 必须是一个仅包含纯 JSON 可序列化值的对象。
函数、类和其他不可序列化值在渲染时将丢失。
(此限制不适用于 <Player>,在那里您可以将函数作为 props 传递。)

你可以在默认属性中使用 DateMapSetstaticFile(),Remotion 将确保正确的序列化。

note

使用 React.FC<{}> 类型为你的组件进行类型定义,defaultProps 属性将具有类型安全性。

note

将大型对象传递给 defaultProps 可能会导致性能下降。了解如何避免

note

使用 type 而不是 interface 来为你的 defaultProps 进行类型定义。了解原因

calculateMetadata

查看:calculateMetadata()

schema

传递一个 Zod 模式,你的默认属性必须满足该模式。通过这样做,你可以启用可视化编辑。查看:定义模式

使用 component 的示例

tsx
import { Composition } from "remotion";
import { MyComp } from "./MyComp";
 
export const MyVideo = () => {
return (
<>
<Composition
id="my-comp"
component={MyComp}
width={1080}
height={1080}
fps={30}
durationInFrames={3 * 30}
/>
</>
);
};
tsx
import { Composition } from "remotion";
import { MyComp } from "./MyComp";
 
export const MyVideo = () => {
return (
<>
<Composition
id="my-comp"
component={MyComp}
width={1080}
height={1080}
fps={30}
durationInFrames={3 * 30}
/>
</>
);
};

使用 lazyComponent 的示例

tsx
export const MyVideo = () => {
return (
<>
<Composition
id="my-comp"
lazyComponent={() => import("./LazyComponent")}
width={1080}
height={1080}
fps={30}
durationInFrames={3 * 30}
/>
</>
);
};
tsx
export const MyVideo = () => {
return (
<>
<Composition
id="my-comp"
lazyComponent={() => import("./LazyComponent")}
width={1080}
height={1080}
fps={30}
durationInFrames={3 * 30}
/>
</>
);
};

使用文件夹组织组合

你可以使用 <Folder /> 组件在侧边栏中组织你的组合。

tsx
import { Composition, Folder } from "remotion";
 
export const Video = () => {
return (
<>
<Folder name="Visuals">
<Composition
id="CompInFolder"
durationInFrames={100}
fps={30}
width={1080}
height={1080}
component={Component}
/>
</Folder>
<Composition
id="CompOutsideFolder"
durationInFrames={100}
fps={30}
width={1080}
height={1080}
component={Component}
/>
</>
);
};
tsx
import { Composition, Folder } from "remotion";
 
export const Video = () => {
return (
<>
<Folder name="Visuals">
<Composition
id="CompInFolder"
durationInFrames={100}
fps={30}
width={1080}
height={1080}
component={Component}
/>
</Folder>
<Composition
id="CompOutsideFolder"
durationInFrames={100}
fps={30}
width={1080}
height={1080}
component={Component}
/>
</>
);
};

参见