# spine-preview

**Repository Path**: dotmoon/spine-preview

## Basic Information

- **Project Name**: spine-preview
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-23
- **Last Updated**: 2026-04-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Spine 3.8 动画预览工具

一个基于浏览器的 Spine 3.8.99 动画预览播放工具，支持本地文件加载、实时预览和交互控制。

## ✨ 功能特性

### 核心功能
- **文件加载**：支持文件选择器和拖拽上传，自动识别 `.json`、`.atlas`、`.png` 文件
- **动画预览**：WebGL 渲染，流畅播放 Spine 3.8 动画
- **动画控制**：播放/暂停/停止、速度调节（0.1x-3.0x）、循环开关
- **动画切换**：侧边栏动画列表，一键切换不同动画
- **皮肤切换**：支持 Spine 皮肤切换
- **视图控制**：鼠标滚轮缩放、鼠标拖拽平移、重置视图
- **背景颜色**：自定义背景颜色选择器

### 辅助功能
- **响应式布局**：适配不同屏幕尺寸
- **深色主题**：现代深色 UI 设计
- **加载指示**：加载中动画和进度提示
- **错误提示**：友好的错误信息通知
- **Canvas 自适应**：自动适应容器尺寸，保证渲染清晰度

## 🛠 技术栈

- **前端框架**：Vite + TypeScript
- **Spine 运行时**：Spine 3.8.99 (spine-ts)
- **渲染**：WebGL
- **构建工具**：Vite

## 📦 安装与运行

### 1. 克隆项目

```bash
git clone https://gitee.com/your-username/spine-preview.git
cd spine-preview
```

### 2. 安装依赖

```bash
npm install
```

### 3. 开发模式

```bash
npm run dev
```

访问 http://localhost:3000 即可预览。

### 4. 生产构建

```bash
npm run build
```

构建产物位于 `dist/` 目录，可部署到任何静态网站服务器。

### 5. 预览构建

```bash
npm run preview
```

## 🚀 使用指南

### 加载动画文件

1. **文件选择器**：点击「选择文件」按钮，选择 `.json`（骨骼数据）、`.atlas`（图集）和 `.png`（纹理）文件
2. **拖拽上传**：直接拖拽文件到页面任何位置

### 控制动画

- **播放/暂停**：点击播放按钮开始动画，暂停按钮暂停/继续
- **停止**：点击停止按钮停止动画
- **速度**：通过滑块调节播放速度（0.1x-3.0x）
- **循环**：勾选循环复选框启用/禁用循环播放
- **动画切换**：在侧边栏选择不同的动画
- **皮肤切换**：在侧边栏选择不同的皮肤

### 控制视图

- **缩放**：使用鼠标滚轮或缩放按钮
- **平移**：鼠标拖拽画布
- **重置**：点击重置按钮恢复默认视图
- **背景**：通过颜色选择器修改背景颜色

## 📁 项目结构

```
spine-preview/
├── index.html              # 主页面
├── package.json            # 项目配置
├── tsconfig.json           # TypeScript 配置
├── vite.config.ts          # Vite 配置
├── src/
│   ├── main.ts             # 入口文件
│   ├── app.ts              # 应用主逻辑
│   ├── spine-loader.ts     # Spine 加载器
│   ├── file-handler.ts     # 文件处理
│   ├── types.ts            # 类型定义
│   ├── style.css           # 样式文件
│   └── vite-env.d.ts       # Vite 环境类型
├── public/
│   └── lib/
│       └── spine-player.js # Spine 3.8 运行时
└── dist/                   # 生产构建产物
```

## 📋 已知限制

1. **仅支持 Spine 3.8 格式**：使用的是 Spine 3.8.99 运行时
2. **仅支持 JSON 骨骼数据**：暂不支持 `.skel` 二进制格式
3. **单纹理图集**：支持单个 `.png` 纹理文件的图集
4. **浏览器兼容性**：需要支持 WebGL 的现代浏览器

## 🎯 测试文件

项目根目录下的 `spine/` 文件夹包含测试用的 Spine 动画文件：
- `xxyx_card_djxz.json` - 骨骼数据
- `xxyx_card_djxz.atlas` - 图集文件
- `xxyx_card_djxz.png` - 纹理图片

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 许可证

MIT License

## 🙏 致谢

- [Spine](https://esotericsoftware.com/) - 2D 骨骼动画解决方案
- [Vite](https://vitejs.dev/) - 现代前端构建工具
- [TypeScript](https://www.typescriptlang.org/) - 类型安全的 JavaScript 超集

---

**注意**：本工具仅用于预览和开发调试，请勿用于商业用途。Spine 运行时的使用需遵守 Spine 的许可协议。