<组合>
这是用于注册视频以使其可渲染并显示在 Remotion 开发界面侧边栏中的组件。
一个组合代表您想要创建的视频,作为一系列剪辑(例如,几个 <Sequence>
),这些剪辑将依次播放以形成您的视频。
src/Root.tsxtsx
import {Composition } from "remotion";export constRemotionRoot :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.tsxtsx
import {Composition } from "remotion";export constRemotionRoot :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 中的任何一个或两个都将导致错误。
如果使用 lazyComponent
,Remotion 将使用 React Suspense 加载组件。组件将根据需要由 Webpack 编译,这将减少 Remotion 的启动时间。如果使用 lazyComponent
,您需要为组件使用默认导出。这是 React Suspense 的限制。
defaultProps
可选
为您的组件提供默认 props。默认 props 可以使用 Props 编辑器 和 Input Props 进行覆盖。
Props 必须是一个仅包含纯 JSON 可序列化值的对象。
函数、类和其他不可序列化值在渲染时将丢失。
(此限制不适用于 <Player>
,在那里您可以将函数作为 props 传递。)
你可以在默认属性中使用 Date
、Map
、Set
和 staticFile()
,Remotion 将确保正确的序列化。
使用 React.FC<{}>
类型为你的组件进行类型定义,defaultProps
属性将具有类型安全性。
将大型对象传递给 defaultProps
可能会导致性能下降。了解如何避免。
使用 type
而不是 interface
来为你的 defaultProps
进行类型定义。了解原因。
calculateMetadata
schema
传递一个 Zod 模式,你的默认属性必须满足该模式。通过这样做,你可以启用可视化编辑。查看:定义模式
使用 component
的示例
tsx
import {Composition } from "remotion";import {MyComp } from "./MyComp";export constMyVideo = () => {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 constMyVideo = () => {return (<><Composition id ="my-comp"component ={MyComp }width ={1080}height ={1080}fps ={30}durationInFrames ={3 * 30}/></>);};
使用 lazyComponent
的示例
tsx
export const MyVideo = () => {return (<><Compositionid="my-comp"lazyComponent={() => import("./LazyComponent")}width={1080}height={1080}fps={30}durationInFrames={3 * 30}/></>);};
tsx
export const MyVideo = () => {return (<><Compositionid="my-comp"lazyComponent={() => import("./LazyComponent")}width={1080}height={1080}fps={30}durationInFrames={3 * 30}/></>);};
使用文件夹组织组合
你可以使用 <Folder />
组件在侧边栏中组织你的组合。
tsx
import {Composition ,Folder } from "remotion";export constVideo = () => {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 constVideo = () => {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 }/></>);};