# remotion

**Repository Path**: hubean/remotion

## Basic Information

- **Project Name**: remotion
- **Description**: remotion动画练习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2026-07-18
- **Last Updated**: 2026-09-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Remotion Hello Video

一个基于 Remotion 框架创建的视频动画项目，包含聊天对话动画和地图路线生长动画。

## 项目简介

使用 Remotion + React + TypeScript 创建的视频动画项目，包含：
1. QQ聊天风格的对话动画（买瓜场景）
2. 成都路线导航地图动画
3. 武汉路线导航地图动画

## 技术栈

- **Remotion** - 视频渲染框架
- **React 18** - UI 框架
- **TypeScript** - 类型安全
- **Node.js** - 运行环境
- **MapLibre GL** - 地图渲染库
- **Turf.js** - 地理空间分析库

## 项目结构

```
.
├── public/              # 静态资源目录
│   ├── 华强.jpg        # 华强头像
│   ├── 郝哥.jpg        # 郝哥头像
│   ├── data.csv        # 成都路线数据
│   ├── data-wuhan.csv  # 武汉路线数据
│   └── data-wuhan-drive.csv # 武汉驾车路线数据
├── src/
│   ├── index.tsx       # 入口文件，注册视频合成
│   ├── Video.tsx       # 聊天界面视频组件
│   ├── MapAnimation.tsx # 成都路线动画组件
│   └── map-route/      # 地图路线动画模块
│       ├── useMapRoute.ts     # 共享路线动画 Hook
│       ├── MapRoute.tsx       # 基础路线动画组件
│       ├── WuhanRoute.tsx     # 武汉路线动画组件
│       ├── MapRouteSchema.ts  # 参数配置
│       ├── MapStyle.ts        # 地图样式
│       └── route-data.ts      # CSV 数据解析
├── package.json        # 项目依赖配置
├── tsconfig.json       # TypeScript 配置
├── remotion.config.ts  # Remotion 配置
└── .gitignore          # Git 忽略文件
```

## 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm start
```

打开浏览器访问 http://localhost:3001 查看效果。

### 渲染视频

```bash
npm run build
```

## 视频合成

### HelloWorld - 聊天对话动画

- **分辨率**: 1080 × 1920 (竖屏)
- **帧率**: 30 fps
- **时长**: 20 秒 (600 帧)

模拟 QQ 聊天界面，展示经典"买瓜"对话场景。

### MapAnimation - 成都路线动画

- **分辨率**: 1080 × 1920 (竖屏)
- **帧率**: 30 fps
- **时长**: 15 秒 (450 帧)

展示从天府广场到二仙桥地铁站的路线生长动画，荧光蓝色路线，镜头跟随移动。

### MapRoute - 通用路线动画

- **分辨率**: 1920 × 1080 (横屏)
- **帧率**: 30 fps
- **时长**: 26 秒 (780 帧)

基于 CSV 数据的通用路线动画，支持途经点停顿和自定义样式。

### WuhanRoute - 武汉路线动画

- **分辨率**: 1920 × 1080 (横屏)
- **帧率**: 30 fps
- **时长**: 29 秒 (870 帧)

武汉路线导航动画，使用 MapLibre GL 渲染。

## 动画效果

### 聊天动画
- ✅ 消息淡入动画（使用 interpolate）
- ✅ 消息缩放出现效果
- ✅ 手机竖屏聊天界面风格
- ✅ 左右两侧气泡区分发送者

### 地图动画
- ✅ 路线生长动画
- ✅ 荧光蓝色发光效果
- ✅ 镜头跟随移动
- ✅ 途经点标记显示
- ✅ 起终点脉冲动画
- ✅ 平滑曲线插值（Catmull-Rom）

## 配置参数

地图动画支持以下自定义参数：
- 路线颜色和发光效果
- 标记点大小和颜色
- 起终点样式
- 地图缩放级别
- 途经点停顿时间
- 结束停留时间

## 变更记录

### v1.1.0 (2026-07-23)

- ✨ 添加地图路线生长动画功能
- ✨ 实现成都路线导航动画（天府广场→二仙桥地铁站）
- ✨ 集成 MapLibre GL 地图渲染
- ✨ 添加 Turf.js 地理空间分析
- ✨ 合并 map-route-animated 项目
- ✨ 添加武汉路线动画
- ✨ 创建共享路线动画 Hook (useMapRoute)
- ✨ 支持 CSV 数据驱动的路线配置
- ✨ 实现平滑曲线插值（Catmull-Rom）
- ✨ 添加途经点停顿和起终点脉冲效果

### v1.0.0 (2026-07-18)

- ✨ 初始化 Remotion 项目
- ✨ 创建打招呼界面
- ✨ 实现聊天对话动画
- ✨ 添加华强、郝哥头像
- ✨ 优化样式适配竖屏显示
- ✨ 配置 Git 忽略文件
- ✨ 推送至 Gitee 仓库

## 代码审查修复 (2026-07-23)

- 🐛 修复 Video.tsx transform 字符串问题，使用独立属性
- 🐛 修复 Video.tsx 样式计算，使用 interpolate()
- 🐛 修复 MapAnimation.tsx 未使用的 evolvePath 导入
- 🐛 修复 MapAnimation.tsx 缺少 React 导入
- 🐛 提取 MapRoute 和 WuhanRoute 的共享组件
- 🐛 优化 MapRoute/WuhanRoute 的 delayRender 逻辑
- 🐛 修复 index.tsx 中 WuhanRoute 的 duration 计算
- 🐛 统一 MapAnimation 使用 MapLibre GL

## 仓库地址

[Gitee 仓库](https://gitee.com/hubean/remotion)