# createAnimation

**Repository Path**: rzcgis/create-animation

## Basic Information

- **Project Name**: createAnimation
- **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-10-16
- **Last Updated**: 2025-10-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 教学动画制作系统 - Canvas实时渲染 + DragonBones

## 项目概述

基于Node.js的教学对话动画制作平台，采用Canvas实时渲染引擎结合DragonBones骨骼动画技术，实现高质量的对话场景动画制作。支持脚本驱动的角色动画、唇形同步、时间轴编辑和视频导出，专为教育内容创作者设计。

## 核心特性

### 🎬 动画渲染引擎
- **Canvas服务器端渲染**：使用node-canvas实现高质量2D渲染，支持1920x1080等高分辨率输出
- **实时预览**：WebSocket同步的实时动画预览系统
- **视频导出**：FFmpeg集成，支持MP4、WebM等多种格式导出
- **帧缓冲优化**：智能缓存机制减少重复渲染

### 🎭 DragonBones骨骼动画
- **完整骨骼支持**：导入DragonBones JSON格式的角色动画数据
- **动画混合**：支持多层动画叠加和权重混合
- **表情系统**：动态表情切换和参数驱动的微表情控制
- **唇形同步**：与rhubarb-lip-sync集成，实现精准的口型同步

### ⏱️ 时间轴编辑系统
- **多轨道编辑**：对话、角色动画、摄像机、音效等多轨道同步
- **关键帧插值**：平滑的动画过渡和参数插值
- **可视化编辑**：基于vis-timeline的前端时间轴编辑器
- **脚本解析**：自动解析对话脚本生成时间轴数据

### 🗣️ 对话处理
- **TTS集成**：文本到语音转换，支持多角色配音
- **情感分析**：基于对话内容自动生成相应表情
- **音频同步**：帧级精确定时音频播放和同步
- **字幕生成**：自动生成同步字幕和对话框动画

## 技术架构

```
┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   前端编辑器    │◄──►│   Node.js API    │◄──►│   渲染服务端    │
│  (React/Vue)    │    │  (Express/Koa)   │    │  (Canvas+FFmpeg)│
└─────────────────┘    └───────────────────┘    └─────────────────┘
         │                        │                        │
         ▼                        ▼                        ▼
┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│  时间轴编辑器   │    │  资源管理器      │    │ DragonBones引擎 │
│ (vis-timeline)  │    │  (角色/背景)     │    │  骨骼渲染器     │
└─────────────────┘    └──────────────────┘    └─────────────────┘
```

## 系统组件

### 1. 渲染核心 (AnimationRenderer)
- 场景管理器：背景、角色、UI层级管理
- 摄像机系统：镜头切换、缩放、平移控制
- 渲染管道：分层渲染和合成优化
- 帧导出器：PNG序列生成和视频编码

### 2. DragonBones集成层
- 骨骼数据解析器：JSON格式DragonBones数据导入
- Canvas渲染适配器：将DragonBones显示对象映射到Canvas
- 动画控制器：时间轴驱动的动画播放和混合
- 参数驱动系统：表情、眼神、头部姿态参数控制

### 3. 时间轴系统 (Timeline)
- 数据结构：JSON格式的多轨道时间轴数据
- 状态插值：关键帧之间的平滑插值计算
- 事件系统：动画触发器和脚本事件处理
- 同步机制：音频、动画、对话的精确时间同步

### 4. 对话处理管道
- 脚本解析器：将对话脚本转换为时间轴事件
- 语音合成器：TTS服务集成和音频文件管理
- 唇形生成器：rhubarb-lip-sync集成和viseme映射
- 情感分析器：基于文本内容的情感识别和表情映射

## 工作流程

### 1. 资源准备
- 使用DragonBones Pro编辑器创建角色骨骼和动画
- 导出JSON格式的骨骼数据和纹理图集
- 准备背景素材和UI元素
- 配置角色表情库和动画状态机

### 2. 脚本创作
- 编写对话脚本（JSON/YAML格式）
- 定义角色、场景、镜头切换
- 配置情感标签和动画触发器
- 预览和调整时间轴

### 3. 自动处理
- TTS生成配音音频
- 唇形同步分析生成口型关键帧
- 自动表情匹配和动画插值
- 资源预加载和优化

### 4. 渲染导出
- 实时预览验证动画效果
- 高质量视频渲染（多线程优化）
- 字幕叠加
- 多格式视频导出

## 项目结构

后端(Node.js)项目结构：
```
src/
├── core/          # 核心引擎
│   ├── renderer/  # Canvas渲染系统
│   ├── timeline/  # 时间轴管理
│   ├── dragonbones/ # DragonBones集成
│   ├── audio/     # 音频处理
│   ├── dialogue/  # 对话处理
│   └── export/    # 视频导出
├── api/           # REST API路由
├── services/      # 业务服务
├── types/         # TypeScript类型定义
├── utils/         # 工具函数
└── index.ts       # 应用入口
```

前端(Vue.js)项目结构：
```
frontend/
├── src/
│   ├── components/      # UI组件
│   │   ├── timeline-editor/  # 时间轴编辑器
│   │   ├── realtime-preview/ # 实时预览
│   │   └── asset-manager/    # 资源管理器
│   ├── services/        # API服务
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件
├── package.json
└── vite.config.js
```

## 安装部署

### 环境要求
- Node.js 16+ 
- GraphicsMagick 或 Cairo (node-canvas依赖)
- FFmpeg 4.0+
- 足够的内存和CPU资源（推荐多核服务器）

### 核心依赖
```bash
npm install canvas fluent-ffmpeg
npm install dragonbones-js @types/dragonbones
npm install vis-timeline @tweenjs/tween.js
npm install rhubarb-lip-sync socket.io
# ffmpeg path : E:\Words\vsr\resources\backend\ffmpeg\win_x64\ffmpeg.exe
```

### 构建步骤
1. 安装系统依赖（GraphicsMagick/Cairo）
2. 克隆项目并安装Node.js依赖
3. 配置DragonBones资源路径
4. 设置FFmpeg路径环境变量
5. 初始化数据库（项目元数据）
6. 启动开发服务器

## 启动项目

### 启动后端服务
```bash
# 安装依赖
npm install

# 启动后端开发服务器
npm run dev
```

后端服务将在 `http://localhost:3000` 上运行。

### 启动前端开发服务器
```bash
# 进入前端目录
cd frontend

# 安装前端依赖
npm install

# 启动前端开发服务器
npm run dev
```

前端服务将在 `http://localhost:3001` 上运行，并通过代理将API请求转发到后端。

### 同时启动前后端
```bash
# 在项目根目录下运行
npm run dev:all
```

这将同时启动后端服务（端口3000）和前端服务（端口3001）。

## API接口

### 项目管理
- `POST /api/projects` - 创建新动画项目
- `GET /api/projects/:id` - 获取项目详情
- `PUT /api/projects/:id` - 更新项目配置

### 时间轴操作
- `POST /api/timeline` - 解析脚本生成时间轴
- `GET /api/timeline/:projectId` - 获取时间轴数据
- `PATCH /api/timeline/:id` - 修改关键帧

### 渲染服务
- `POST /api/render/preview` - 实时预览指定时间段
- `POST /api/render/export` - 完整视频渲染任务
- `GET /api/render/:taskId/status` - 渲染任务状态查询

### 资源管理
- `POST /api/assets/upload` - 上传DragonBones资源
- `GET /api/assets/:type` - 获取资源列表
- `DELETE /api/assets/:id` - 删除资源文件

## 性能优化

### 渲染优化
- **分层缓存**：静态背景和UI元素缓存复用
- **多线程渲染**：使用worker_threads并行处理帧渲染
- **LOD策略**：根据预览/最终渲染调整质量
- **纹理压缩**：PNG优化和图集合并

### 内存管理
- **对象池**：Canvas对象和渲染资源的复用
- **垃圾回收**：定时清理未使用资源
- **流式处理**：大文件分块处理避免内存溢出

### 网络优化
- **WebSocket压缩**：实时预览数据压缩传输
- **分片上传**：大资源文件的断点续传
- **CDN集成**：静态资源加速分发

## 扩展性设计

### 插件系统
- **渲染器插件**：支持WebGL、SVG等其他渲染后端
- **动画引擎插件**：可扩展其他骨骼动画格式
- **TTS插件**：支持多种语音合成服务
- **导出插件**：GIF、Animated WebP等格式支持

### 自定义节点
- **效果节点**：粒子系统、过渡效果自定义
- **行为节点**：复杂AI行为和交互逻辑
- **数据节点**：外部数据源集成和动态内容

### API扩展
- **Webhook支持**：渲染完成通知和任务回调
- **RESTful扩展**：自定义业务逻辑接口
- **GraphQL支持**：复杂查询和批量操作

## 开发指南