基础知识

React 组件

Remotion 的理念是为您提供一个帧编号和一个空白画布，您可以使用 React 渲染任何您想要的内容。这是一个示例 React 组件，将当前帧渲染为文本：

MyComposition.tsx
tsx
import { AbsoluteFill, useCurrentFrame } from "remotion";
 
export const MyComposition = () => {
  const frame = useCurrentFrame();
 
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        fontSize: 100,
        backgroundColor: "white",
      }}
    >
      The current frame is {frame}.
    </AbsoluteFill>
  );
};

MyComposition.tsx
tsx
import { AbsoluteFill, useCurrentFrame } from "remotion";
 
export const MyComposition = () => {
  const frame = useCurrentFrame();
 
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        fontSize: 100,
        backgroundColor: "white",
      }}
    >
      The current frame is {frame}.
    </AbsoluteFill>
  );
};

视频是随时间变化的图像的函数。如果您每帧更改内容，最终会得到一个动画。

视频属性

视频有 4 个属性：

• width，以像素为单位。
• height，以像素为单位。
• durationInFrames：视频的帧数。
• fps：视频的帧率。

您可以从 useVideoConfig() 钩子中获取这些值：

tsx
import {AbsoluteFill, useVideoConfig} from 'remotion';
 
export const MyComposition = () => {
  const {fps, durationInFrames, width, height} = useVideoConfig();
 
  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 60,
        backgroundColor: 'white',
      }}
    >
      This {width}x{height}px video is {durationInFrames / fps} seconds long.
    </AbsoluteFill>
  );
};

tsx
import {AbsoluteFill, useVideoConfig} from 'remotion';
 
export const MyComposition = () => {
  const {fps, durationInFrames, width, height} = useVideoConfig();
 
  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 60,
        backgroundColor: 'white',
      }}
    >
      This {width}x{height}px video is {durationInFrames / fps} seconds long.
    </AbsoluteFill>
  );
};

note

视频的第一帧是 0，最后一帧是 durationInFrames - 1。

组合

组合是 React 组件和视频元数据的结合。

通过在 src/Root.tsx 中渲染 <Composition> 组件，您可以注册一个可渲染的视频，并在 Remotion 侧边栏中显示它。

src/Root.tsx
tsx
export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="MyComposition"
      durationInFrames={150}
      fps={30}
      width={1920}
      height={1080}
      component={MyComposition}
    />
  );
};

src/Root.tsx
tsx
export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="MyComposition"
      durationInFrames={150}
      fps={30}
      width={1920}
      height={1080}
      component={MyComposition}
    />
  );
};

note

您可以通过将它们包装在 React Fragment 中在 src/Root.tsx 中注册多个组合：
<><Composition/><Composition/></>。另请参阅：如何组合组合？