# remotion_test

**Repository Path**: dreamplay/remotion_test

## Basic Information

- **Project Name**: remotion_test
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-21
- **Last Updated**: 2025-12-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Remotion 入门模板

使用 [Remotion](https://remotion.dev) 以编程方式创建视频的快速入门模板。

## 项目结构

```
├── src/
│   ├── index.ts      # 入口文件
│   ├── Root.tsx      # 根组件，包含 Composition
│   └── MyComp.tsx    # 视频组件
├── package.json
└── tsconfig.json
```

## 快速开始

### 安装依赖

```bash
npm install
```

### 启动预览工作室

```bash
npm start
```

这将在浏览器中打开 Remotion Studio，您可以在其中预览视频。

### 渲染视频

```bash
npm run build
```

输出视频将保存到 `out/video.mp4`。

## 核心概念

### Composition（合成）

在 `Root.tsx` 中定义您的视频：

```tsx
<Composition
  id="MyComp"
  component={MyComp}
  durationInFrames={120}  // 30fps 下为 4 秒
  width={1920}
  height={1080}
  fps={30}
/>
```

### useCurrentFrame

在组件中获取当前帧号：

```tsx
const frame = useCurrentFrame();
```

### interpolate（插值）

随时间变化动画值：

```tsx
const opacity = interpolate(frame, [0, 30], [0, 1], {
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
```

### spring（弹簧动画）

创建弹簧动画效果：

```tsx
const scale = spring({
  fps,
  frame,
  config: { damping: 200 },
});
```

### Sequence（序列）

在特定时间显示元素：

```tsx
<Sequence from={30} durationInFrames={60}>
  <MyElement />
</Sequence>
```

## 相关链接

- [Remotion 文档](https://remotion.dev/docs)
- [Remotion GitHub](https://github.com/remotion-dev/remotion)