remotion-best-practices

name: remotion-best-practices
description: Remotion 最佳实践 - 在 React 中创建视频
metadata:
    tags: remotion, video, react, animation, composition

何时使用

在处理Remotion代码时，使用此技能获取领域特定知识。

新项目设置

在空文件夹或没有现有Remotion项目的工作区中，使用以下命令创建项目：

npx create-video@latest --yes --blank --no-tailwind my-video

将my-video替换为合适的项目名称。

设计视频

使用useCurrentFrame()和interpolate()对属性进行动画处理。使用Easing自定义动画时序。

import { useCurrentFrame, Easing } from "remotion";

export const FadeIn = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: "clamp",
    extrapolateLeft: "clamp",
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });

  return <div style={{ opacity }}>Hello World!</div>;
};

禁止使用CSS过渡或动画——它们无法正确渲染。

禁止使用Tailwind动画类名——它们无法正确渲染。

将资源放置在项目根目录的public/文件夹中。

使用staticFile()引用public/文件夹中的文件。

使用<Img>组件添加图片：

import { Img, staticFile } from "remotion";

export const MyComposition = () => {
  return <Img src={staticFile("logo.png")} style={{ width: 100, height: 100 }} />;
};

使用@remotion/media中的<Video>组件添加视频：

import { Video } from "@remotion/media";
import { staticFile } from "remotion";

export const MyComposition = () => {
  return <Video src={staticFile("video.mp4")} style={{ opacity: 0.5 }} />;
};

使用@remotion/media中的<Audio>组件添加音频：

import { Audio } from "@remotion/media";
import { staticFile } from "remotion";

export const MyComposition = () => {
  return <Audio src={staticFile("audio.mp3")} />;
};

资源也可以作为远程URL引用：

import { Video } from "@remotion/media";

export const MyComposition = () => {
  return <Video src="https://remotion.media/video.mp4" />
};

要延迟内容，将其包裹在<Sequence>中并使用from。

要限制元素的持续时间，请使用<Sequence>的durationInFrames属性。

默认情况下，<Sequence>是绝对填充。对于内联内容，请使用layout="none"。

import { Sequence } from "remotion";

export const Title = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: "clamp",
    extrapolateLeft: "clamp",
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });

  return <div style={{ opacity }}>Title</div>;
};

export const Subtitle = () => {
  return <div>Subtitle</div>;
};

const Main = () => {
  const {fps} = useVideoConfig();

  return (
    <AbsoluteFill>
      <Sequence>
        <Background />
      </Sequence>
      <Sequence from={1 * fps} durationInFrames={2 * fps} layout="none">
        <Title />
      </Sequence>
      <Sequence from={2 * fps} durationInFrames={2 * fps} layout="none">
        <Subtitle />
      </Sequence>
    </AbsoluteFill>
  );
}

视频的宽度、高度、fps和时长在src/Root.tsx中定义：

import { Composition } from "remotion";
import { MyComposition } from "./MyComposition";

export const RemotionRoot = () => {
  return (
    <Composition
      id="MyComposition"
      component={MyComposition}
      durationInFrames={100}
      fps={30}
      width={1080}
      height={1080}
    />
  );
};

元数据也可以动态计算：

import { Composition, CalculateMetadataFunction } from "remotion";
import { MyComposition, MyCompositionProps } from "./MyComposition";

const calculateMetadata: CalculateMetadataFunction<
  MyCompositionProps
> = async ({ props, abortSignal }) => {
  const data = await fetch(`https://api.example.com/video/${props.videoId}`, {
    signal: abortSignal,
  }).then((res) => res.json());

  return {
    durationInFrames: Math.ceil(data.duration * 30),
    props: {
      ...props,
      videoUrl: data.url,
    },
    width: 1080,
    height: 1080,
  };
};

export const RemotionRoot = () => {
  return (
    <Composition
      id="MyComposition"
      component={MyComposition}
      fps={30}
      width={1080}
      height={1080}
      defaultProps={{ videoId: "abc123" }}
      calculateMetadata={calculateMetadata}
    />
  );
};

启动预览

启动Remotion Studio预览视频：

npx remotion studio

可选：单帧渲染检查

你可以通过CLI渲染单帧来检查布局、颜色或时序。

对于简单的编辑、纯重构或当你已从Studio或之前的渲染中获得足够信心时，可以跳过此步骤。

npx remotion still [composition-id] --scale=0.25 --frame=30

在30fps下，--frame=30表示第1秒（--frame从0开始）。

字幕

处理字幕时，请加载./rules/subtitles.md文件以获取更多信息。

使用FFmpeg

对于某些视频操作，例如修剪视频或检测静音，应使用FFmpeg。请加载./rules/ffmpeg.md文件以获取更多信息。

静音检测

当需要检测并修剪视频或音频文件中的静音片段时，请加载./rules/silence-detection.md文件。

音频可视化

当需要可视化音频（频谱条、波形、低音反应效果）时，请加载./rules/audio-visualization.md文件以获取更多信息。

音效

当需要使用音效时，请加载./rules/sfx.md文件以获取更多信息。

3D内容

关于使用Three.js和React Three Fiber在Remotion中创建3D内容，请参见[rules/3d.md](rules/3d.md)。

高级音频

关于高级音频功能（修剪、音量、速度、音调），请参见[rules/audio.md](rules/audio.md)。

动态时长、尺寸和数据

关于动态设置合成时长、尺寸和属性，请参见[rules/calculate-metadata.md](rules/calculate-metadata.md)。

高级合成

关于如何定义静态图像、文件夹、默认属性以及如何嵌套合成，请参见[rules/compositions.md](rules/compositions.md)。

Google字体

这是Remotion中加载字体的推荐方式。关于如何加载Google字体，请参见[rules/google-fonts.md](rules/google-fonts.md)。

本地字体

关于如何加载本地字体，请参见[rules/local-fonts.md](rules/local-fonts.md)。

获取音频时长

关于使用Mediabunny获取音频文件的时长（秒），请参见[rules/get-audio-duration.md](rules/get-audio-duration.md)。

获取视频尺寸

关于使用Mediabunny获取视频文件的宽度和高度，请参见[rules/get-video-dimensions.md](rules/get-video-dimensions.md)。

获取视频时长

关于使用Mediabunny获取视频文件的时长（秒），请参见[rules/get-video-duration.md](rules/get-video-duration.md)。

GIF

关于如何显示与Remotion时间线同步的GIF，请参见[rules/gifs.md](rules/gifs.md)。

高级图片

关于调整和定位图片、动态图片路径以及获取图片尺寸，请参见[rules/images.md](rules/images.md)。

光泄漏

关于使用@remotion/light-leaks实现光泄漏叠加效果，请参见[rules/light-leaks.md](rules/light-leaks.md)。

Lottie动画

关于在Remotion中嵌入Lottie动画，请参见[rules/lottie.md](rules/lottie.md)。

Canvas中的HTML

如果你需要将HTML渲染到<canvas>中，以便通过<HtmlInCanvas>应用2D或WebGL效果，请参见[rules/html-in-canvas.md](rules/html-in-canvas.md)。

测量DOM节点

关于在Remotion中测量DOM元素尺寸，请参见[rules/measuring-dom-nodes.md](rules/measuring-dom-nodes.md)。

测量文本

关于测量文本尺寸、使文本适应容器以及检查溢出，请参见[rules/measuring-text.md](rules/measuring-text.md)。

高级排序

关于更多的排序模式——延迟、修剪、限制项目持续时间，请参见[rules/sequencing.md](rules/sequencing.md)。

TailwindCSS

关于在Remotion中使用TailwindCSS，请参见[rules/tailwind.md](rules/tailwind.md)。

文本动画

关于排版和文本动画模式，请参见[rules/text-animations.md](rules/text-animations.md)。

高级时序

关于使用interpolate、贝塞尔缓动和弹簧的高级时序，请参见[rules/timing.md](rules/timing.md)。

转场

关于场景转场模式，请参见[rules/transitions.md](rules/transitions.md)。

透明视频

关于渲染带透明度的视频，请参见[rules/transparent-videos.md](rules/transparent-videos.md)。

修剪

关于修剪模式——剪切动画的开始或结束，请参见[rules/trimming.md](rules/trimming.md)。

高级视频

关于嵌入视频的高级知识——修剪、音量、速度、循环、音调，请参见[rules/videos.md](rules/videos.md)。

参数化视频

关于通过添加Zod模式使合成可参数化，请参见[rules/parameters.md](rules/parameters.md)。

地图

对于简单的带有少量飞越的地图，考虑使用静态地图图片。

对于带有动画路线或飞越的复杂地图，请加载地图规则：[rules/maplibre.md](rules/maplibre.md)

画外音

关于使用ElevenLabs TTS为Remotion合成添加AI生成的画外音，请参见[rules/voiceover.md](rules/voiceover.md)。