# remotion-example

**Repository Path**: yobrave/remotion-example

## Basic Information

- **Project Name**: remotion-example
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-10
- **Last Updated**: 2026-01-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Remotion 从入门到精通完整教程

这是一个完整的 Remotion 学习路径，从最基础的概念到高级应用，帮助你掌握使用 React 创建视频的技能。

## 📚 目录

1. [入门](#入门)
2. [基础](#基础)
3. [中级](#中级)
4. [高级](#高级)
5. [精通](#精通)
6. [实战应用](#实战应用)

---

## 🚀 快速开始

### 安装依赖

```bash
npm install
```

这将为所有示例项目安装共享的依赖。

### 运行示例

每个示例都有独立的开发服务器：

```bash
# 示例 1：Hello World
npm run example:1

# 示例 2：基础动画
npm run example:2

# 示例 3：音频视频
npm run example:3

# 示例 4：数据驱动
npm run example:4

# 示例 5：高级动画
npm run example:5

# 示例 6：图片效果
npm run example:6

# 示例 7：视频合成
npm run example:7

# 示例 8：人物动画
npm run example:8

# 示例 9：React Player App（普通 React 应用中使用 Player）
npm run example:9

# 示例 10：实时参数控制
npm run example:10
```

---

## 📖 学习路径

### 入门

**示例 1：Hello World** (`examples/01-hello-world`)

学习目标：
- 了解 Remotion 的基本概念
- 创建第一个视频组件
- 理解 Composition 和 Sequence 的概念
- 渲染视频为 MP4

核心概念：
- `Composition`：定义视频的基本参数（宽度、高度、时长、FPS）
- `Sequence`：在时间轴上安排组件
- `useCurrentFrame`：获取当前帧数
- `interpolate`：在帧数之间进行插值

### 基础

**示例 2：基础动画** (`examples/02-basic-animation`)

学习目标：
- 学习使用 `interpolate` 创建动画
- 掌握 `spring` 和 `ease` 缓动函数
- 创建淡入淡出效果
- 理解时间轴控制

核心概念：
- `interpolate`：帧数到值的映射
- `spring`：物理动画
- `useVideoConfig`：获取视频配置
- `Sequence`：精确的时间控制

### 中级

**示例 3：音频视频** (`examples/03-audio-video`)

学习目标：
- 添加音频到视频
- 使用外部视频文件
- 创建字幕和标题
- 同步音频和视觉元素

核心概念：
- `<Audio>`：音频组件
- `<Video>`：视频组件
- `<Img>`：图片组件
- `useAudioData`：音频数据
- `useVideoMetadata`：视频元数据

### 高级

**示例 4：数据驱动视频** (`examples/04-data-driven`)

学习目标：
- 从 API 或数据源获取数据
- 动态生成多个场景
- 批量渲染
- 参数化视频内容

核心概念：
- `getInputProps`：获取渲染参数
- `useState` 和 `useEffect`：数据获取
- `RemotionRoot`：根组件
- 批量渲染配置

### 精通

**示例 5：高级动画组合** (`examples/05-advanced-animation`)

学习目标：
- 复杂的动画组合
- 3D 变换和透视
- 自定义 Hook
- 性能优化
- 导出高质量视频

核心概念：
- `transform` 和 `perspective`
- 自定义 Hooks
- `useMemo` 和性能优化
- `renderMedia`：编程式渲染
- 配置导出参数

### 实战应用

**示例 6：图片效果** (`examples/06-image-effects`)

学习目标：
- 图片轮播和切换效果
- 图片滤镜应用
- 图片 2D/3D 变换
- 视差滚动效果

核心概念：
- `<Img>` 组件的使用
- CSS 滤镜效果
- 图片动画和过渡
- 多层图片合成

**示例 7：视频合成** (`examples/07-video-composition`)

学习目标：
- 多视频网格布局
- 视频转场效果
- 画中画实现
- 视频叠加层

核心概念：
- `<Video>` 组件的使用
- 多视频同步播放
- 视频转场动画
- 视频叠加和混合

**示例 8：人物动画** (`examples/08-character-animation`)

学习目标：
- 骨骼动画系统
- 人物动作序列
- 物理运动模拟
- 复杂动画循环

核心概念：
- 动画循环和周期
- 骨骼变换
- 重力模拟
- 动作插值

**示例 9：React Player App** (`examples/09-react-player-app`)

学习目标：
- 在普通 React 应用中使用 Player 组件
- 使用 Vite 构建工具
- 创建生产环境可用的应用
- 不依赖 Remotion Studio
- **实时参数控制** - 在界面上修改参数，视频实时更新

核心概念：
- 标准 React 应用结构
- Vite 开发服务器
- Player 组件集成
- `inputProps` 传递参数
- 实时参数控制
- 生产环境部署

**示例 10：实时参数控制** (`examples/10-realtime-controls`)

学习目标：
- 使用 Schema 定义参数
- 在 Remotion Studio 中实时调整参数
- 即时预览参数变化效果
- 参数验证和类型安全

核心概念：
- `zod` schema 定义
- `defaultProps` 默认值
- 实时参数更新
- 控制面板集成

---

## 🎯 核心概念详解

### 1. Composition（合成）

Composition 是 Remotion 视频的根容器，定义视频的基本属性：

```typescript
<Composition
  id="MyVideo"
  component={MyVideo}
  durationInFrames={150}
  fps={30}
  width={1920}
  height={1080}
/>
```

### 2. Frame（帧）

Remotion 基于帧的概念，每一帧都是一个静态画面：

```typescript
const frame = useCurrentFrame();
// frame 从 0 开始，每 1/FPS 秒增加 1
```

### 3. Interpolate（插值）

将帧数映射到值，创建动画：

```typescript
const opacity = interpolate(frame, [0, 30], [0, 1]);
// 在 0-30 帧之间，opacity 从 0 变为 1
```

### 4. Sequence（序列）

在时间轴上精确控制组件的显示时间：

```typescript
<Sequence from={0} durationInFrames={30}>
  <FadeIn />
</Sequence>
```

### 5. Audio（音频）

添加音频轨道：

```typescript
<Audio src="audio.mp3" />
```

### 6. Video（视频）

嵌入视频文件：

```typescript
<Video src="video.mp4" />
```

---

## 📦 项目结构

```
remotion-learning/
├── package.json              # 根 package.json（workspaces 配置）
├── node_modules/             # 共享的依赖（所有示例共用）
├── README.md                 # 本文件
└── examples/
    ├── 01-hello-world/       # 入门示例
    ├── 02-basic-animation/   # 基础动画
    ├── 03-audio-video/       # 音频视频
    ├── 04-data-driven/       # 数据驱动
    ├── 05-advanced-animation/ # 高级动画
    ├── 06-image-effects/     # 图片效果
    ├── 07-video-composition/ # 视频合成
    ├── 08-character-animation/ # 人物动画
    ├── 09-react-player-app/  # React Player App（普通 React 应用中使用 Player）
    └── 10-realtime-controls/  # 实时参数控制（Remotion Studio）
```

---

## 🔧 常用命令

### 开发模式

```bash
# 启动 Remotion Studio（预览和编辑）
npm run dev

# 或进入具体示例目录
cd examples/01-hello-world
npm run dev
```

### 渲染视频

```bash
# 渲染为 MP4
npm run build

# 渲染单个合成
npx remotion render src/index.tsx MyVideo out/video.mp4
```

### 渲染配置

```bash
# 高质量渲染
npx remotion render src/index.tsx MyVideo out/video.mp4 \
  --codec=libx264 \
  --crf=18 \
  --pixel-format=yuv420p
```

---

## 📝 最佳实践

1. **性能优化**
   - 使用 `useMemo` 缓存计算结果
   - 避免在渲染过程中进行复杂计算
   - 使用 `useVideoConfig()` 获取配置而不是硬编码

2. **代码组织**
   - 将复杂组件拆分为小组件
   - 使用自定义 Hooks 复用逻辑
   - 创建可复用的动画函数

3. **时间控制**
   - 使用 `Sequence` 精确控制时间
   - 使用常量定义时间点，避免魔法数字
   - 充分利用 `interpolate` 的灵活性

4. **调试技巧**
   - 使用 Remotion Studio 的时间轴预览
   - 使用 `console.log` 调试帧数
   - 使用 `useCurrentFrame()` 检查当前帧

---

## 🌟 进阶资源

- [Remotion 官方文档](https://www.remotion.dev/docs)
- [Remotion API 参考](https://www.remotion.dev/docs)
- [Remotion 模板库](https://www.remotion.dev/templates)
- [Remotion Discord 社区](https://remotion.dev/discord)

---

## 💡 常见问题

### Q: 如何渲染多个视频？

A: 使用批量渲染功能，或创建多个 Composition。

### Q: 如何添加字幕？

A: 使用 `<Text>` 组件和 `Sequence` 控制显示时间。

### Q: 如何优化渲染速度？

A: 使用 Remotion Lambda 进行云端渲染，或优化代码减少计算量。

### Q: 如何自定义导出参数？

A: 使用 `--codec`、`--crf` 等命令行参数，或在代码中使用 `renderMedia`。

---

## 📄 许可证

本教程项目仅供学习使用。

---

**祝你学习愉快！🎬**