remotion-cn

# Remotion CN - React 视频创建框架

Remotion 是一个用 React 创建视频的强大框架。支持多种输出格式（MP4、WebM、GIF），可以在服务器端渲染视频。

## 功能

### 视频创建
- **多输出格式** - MP4、WebM、GIF、PNG 序列
- **React 编程** - 用 JSX 创建动画
- **高性能** - 服务器端渲染，比 Canvas 更快
- **代码重用** - 组件化开发，可复用

### 动画类型
- **变换** - 缩放、旋转、透明度
- **时间轴** - 多轨同时播放
- **音频** - 音轨支持
- **3D** - 基础 3D 变换（CSS 3D）

---

## 安装

### 创建新项目
```bash
# 使用 create-video
npx create-video@latest my-video
cd my-video

# 或使用 Vite
npx create-vite@latest my-video
cd my-video
npm install remotion
```

### 手动安装
```bash
npm install remotion @remotion/cli --save-dev
```

---

## 快速开始

### 示例 1：Hello World 视频
```tsx
// src/App.tsx
import { Composition } from 'remotion';

export const RemotionRoot: React.FC = () => {
  return (
    <Composition>
      <HelloWorld />
    </Composition>
  );
};

export default RemotionRoot;
```

```tsx
// src/HelloWorld.tsx
import { AbsoluteFill } from 'remotion';

export const HelloWorld: React.FC = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: 'white' }}>
      <div style={{ fontSize: 120, color: 'black', fontFamily: 'sans-serif' }}>
        你好，Remotion！
      </div>
    </AbsoluteFill>
  );
};
```

### 渲染视频
```bash
# 渲染为 MP4
npx remotion render src/App.tsx out/video.mp4

# 在浏览器中预览
npx remotion studio src/App.tsx
```

### 示例 2：动画文本
```tsx
import { AbsoluteFill, useCurrentFrame, useVideoConfig, Video } from 'remotion';

export const TextSlide: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill style={{ backgroundColor: '#1a1a2a' }}>
      <div style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100%'
      }}>
        <h1 style={{
          fontSize: 80,
          color: 'white',
          opacity: frame % 60, // 闪烁效果
          transform: `translateY(${Ma...

# Remotion CN - 示例项目

这是一个简单的 Remotion 项目示例，展示如何用代码创建视频。

## 项目结构

```
remotion-cn-example/
├── package.json
├── tsconfig.json
├── remotion.config.ts
├── src/
│   ├── App.tsx
│   ├── HelloWorld.tsx
│   └── AnimatedText.tsx
└── public/
    └── index.html
```

## 安装

```bash
# 创建新项目
npx create-video@latest my-video

cd my-video

# 安装 Remotion
npm install remotion @remotion/cli
```

## 示例代码

### 1. Hello World

```tsx
// src/HelloWorld.tsx
import { Composition } from 'remotion';

export const HelloWorld: React.FC = () => {
  return (
    <Composition>
      <HelloWorld />
    </Composition>
  );
};
```

### 2. 动画文本

```tsx
// src/AnimatedText.tsx
import { AbsoluteFill, useCurrentFrame } from 'remotion';

export const AnimatedText: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill style={{ backgroundColor: '#1a1a2a' }}>
      <div style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100%',
        fontFamily: 'sans-serif',
        fontSize: 80,
        color: 'white',
        opacity: frame % 60, // 闪烁效果
        transform: `translateY(${Math.sin(frame * 0.1) * 20}px)`
      }}>
        Remotion + AI = 🎥
      </div>
    </AbsoluteFill>
  );
};
```

### 3. 图片动画

```tsx
// src/AnimatedImage.tsx
import { AbsoluteFill, useCurrentFrame, Img } from 'remotion';

export const AnimatedImage: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill style={{ backgroundColor: 'black' }}>
      <Img
        src="https://github.com/remotion-dev/remotion/blob/main/packages/remotion/example/public/logo.png"
        style={{
          width: 400,
          height: 400,
          position: 'absolute',
          left: '50%',
          top: '50%',
          transform: `translate(-50%, -50%) rotate(${frame}deg)`
        }}
      />
    </AbsoluteFill>
  );
};
```

## 渲染命令

```bash
# 开发服务器（实时预览）
npx...