Skip to main content

基础

React 组件​

🌐 React components

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

🌐 The idea of Remotion is to give you a frame number and a blank canvas, to which you can render anything you want using React. This is an example React component that renders the current frame as text:

MyComposition.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>
  );
};

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

🌐 A video is a function of images over time. If you change content every frame, you'll end up with an animation.

视频属性​

🌐 Video properties

一个视频有4个属性：

🌐 A video has 4 properties:

  • width 的像素。
  • height 的像素。
  • durationInFrames：视频中的总帧数。
  • fps：视频的帧率。

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

🌐 You can obtain these values from the useVideoConfig() hook:

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。

作文​

🌐 Compositions

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

🌐 A composition is the combination of a React component and video metadata.

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

🌐 By rendering a <Composition> component in src/Root.tsx, you can register a renderable video and make it visible in the Remotion sidebar.

src/Root.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/></>。另请参见：如何组合组件？

Last updated on