remotion

Remotion - 使用 React 创建视频

使用 Remotion 以编程方式创建视频的综合技能集。Remotion 是一个基于 React 以编程方式创建视频的框架。

适用场景

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

• 使用 React 组件创建视频合成
• 使用基于帧的动画制作元素动画
• 使用音频、视频和图像素材
• 构建图表和数据可视化
• 实现文本动画和字幕
• 使用 Three.js 创建 3D 内容
• 应用转场和序列编排
• 集成 Tailwind CSS 和 Lottie 动画

核心概念

Remotion 支持通过以下方式创建视频：

• React 组件：使用熟悉的 React 语法构建视频内容
• 基于帧的动画：所有动画均由 useCurrentFrame() hook 驱动
• 合成：定义包含时长、尺寸和 props 的视频合成
• 素材：导入和处理图像、视频、音频和字体
• 渲染：使用可自定义的设置以编程方式导出视频

主要功能

• 逐帧控制动画
• 动态计算元数据
• 媒体处理（修剪、音量、速度、音高）
• 生成和显示字幕
• 使用图表进行数据可视化
• 集成 3D 内容
• 专业文本动画
• 场景转场和序列编排

使用方法

阅读各个规则文件，了解详细说明和代码示例：

核心动画与计时

• references/animations.md - Remotion 的基础动画技术
• references/timing.md - 插值曲线：线性、缓动、弹簧动画
• references/sequencing.md - 延迟、修剪和限制项目时长
• references/trimming.md - 剪掉动画的开头或结尾

合成与元数据

• references/compositions.md - 定义合成、静帧、文件夹和默认 props
• references/calculate-metadata.md - 动态设置合成时长、尺寸和 props

素材与媒体

• references/assets.md - 导入图像、视频、音频和字体
• references/images.md - 使用 Img 组件嵌入图像
• references/videos.md - 嵌入视频并进行修剪、音量、速度、循环和音高设置
• references/audio.md - 使用音频和声音并进行修剪、音量、速度和音高设置
• references/gifs.md - 显示与时间轴同步的 GIF

文本与排版

• references/text-animations.md - 排版和文本动画模式
• references/measuring-text.md - 测量文本尺寸、调整文本以适应空间、检查溢出
• references/fonts.md - 加载 Google Fonts 和本地字体

字幕与转录

• references/display-captions.md - 显示字幕，包含 TikTok 风格页面和词语高亮
• references/import-srt-captions.md - 使用 @remotion/captions 导入 .srt 字幕文件
• references/transcribe-captions.md - 转录音频以生成字幕

数据可视化

• references/charts.md - 图表和数据可视化模式

高级功能

• references/3d.md - 使用 Three.js 和 React Three Fiber 创建 3D 内容
• references/lottie.md - 嵌入 Lottie 动画
• references/transitions.md - 场景转场模式

样式与布局

• references/tailwind.md - 在 Remotion 中使用 TailwindCSS
• references/measuring-dom-nodes.md - 测量 DOM 元素尺寸

媒体处理（Mediabunny）

• references/can-decode.md - 检查浏览器是否能解码视频
• references/extract-frames.md - 从视频的指定时间戳提取帧
• references/get-audio-duration.md - 获取音频文件的时长
• references/get-video-dimensions.md - 获取视频文件的宽度和高度
• references/get-video-duration.md - 获取视频文件的时长

快速入门示例

import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";

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

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <div style={{ opacity }}>
      <h1>Hello Remotion!</h1>
    </div>
  );
};

最佳实践

1. 始终使用 useCurrentFrame() - 根据当前帧驱动所有动画
2. 避免使用 CSS 动画 - 它们在视频中无法正确渲染
3. 以秒为单位思考 - 将时间（秒）乘以 fps 来计算帧数
4. 使用 interpolate 实现平滑动画 - 使用内置插值和缓动函数
5. 限制外推范围 - 避免数值超出预期范围
6. 经常测试 - 渲染前在 Remotion Studio 中预览

资源

• 文档：https://www.remotion.dev/docs
• 代码仓库：https://github.com/remotion-dev/remotion
• 技能代码仓库：https://github.com/remotion-dev/skills
• 社区：Discord 和 GitHub Discussions
• 许可证：MIT