lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

使用时机

当你处理 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>
  );
}

视频的宽度、高度、帧率和持续时间在 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

在 30 fps 下，--frame=30 表示一秒标记（--frame 从零开始）。

字幕

处理字幕时，请加载 ./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/audio.md。

动态时长、尺寸和数据

有关动态设置合成时长、尺寸和属性（props），请参阅 rules/calculate-metadata.md。

高级合成

有关如何定义静态画面、文件夹、默认属性以及如何嵌套合成，请参阅 rules/compositions.md。

Google Fonts

这是在 Remotion 中加载字体的推荐方式。有关如何加载 Google Fonts，请参阅 rules/google-fonts.md。

本地字体

有关如何加载本地字体，请参阅 rules/local-fonts.md。

获取音频时长

有关使用 Mediabunny 获取音频文件时长（秒），请参阅 rules/get-audio-duration.md。

获取视频尺寸

有关使用 Mediabunny 获取视频文件的宽度和高度，请参阅 rules/get-video-dimensions.md。

获取视频时长

有关使用 Mediabunny 获取视频文件时长（秒），请参阅 rules/get-video-duration.md。

GIF

有关如何显示与 Remotion 时间线同步的 GIF，请参阅 rules/gifs.md。

高级图片

有关调整图片大小和位置、动态图片路径以及获取图片尺寸，请参阅 rules/images.md。

光泄漏

有关使用 @remotion/light-leaks 制作光泄漏叠加效果，请参阅 rules/light-leaks.md。

Lottie 动画

有关在 Remotion 中嵌入 Lottie 动画，请参阅 rules/lottie.md。

Canvas 中的 HTML

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

测量 DOM 节点

有关在 Remotion 中测量 DOM 元素尺寸，请参阅 rules/measuring-dom-nodes.md。

测量文本

有关测量文本尺寸、将文本适配到容器以及检查溢出，请参阅 rules/measuring-text.md。

高级排序与合成

有关更多排序模式（延迟、修剪、限制项目持续时间），请参阅 rules/sequencing.md。

TailwindCSS

有关在 Remotion 中使用 TailwindCSS，请参阅 rules/tailwind.md。

文本动画

有关排版和文本动画模式，请参阅 rules/text-animations.md。

高级时序

有关使用 interpolate 和贝塞尔缓动以及弹簧的高级时序，请参阅 rules/timing.md。

转场

有关场景转场模式，请参阅 rules/transitions.md。

透明视频

有关渲染带有透明通道的视频，请参阅 rules/transparent-videos.md。

修剪

有关修剪模式（裁剪动画的开头或结尾），请参阅 rules/trimming.md。

高级视频

有关嵌入视频的高级知识（修剪、音量、速度、循环、音高），请参阅 rules/videos.md。

参数化视频

有关通过添加 Zod 模式使合成可参数化，请参阅 rules/parameters.md。

地图

对于带有简单飞越的简单地图，可以考虑使用静态地图图片。 对于带有动画路线或飞越的复杂地图，请加载地图规则：rules/maplibre.md

画外音

有关使用 ElevenLabs TTS 向 Remotion 合成添加 AI 生成的画外音，请参阅 rules/voiceover.md。