专为 2D 游戏动画师与独立开发者打造的专业序列帧处理与动画预览套件。
一键解决精灵大图中相邻帧武器/披风相互穿插、网格切片超出、重心跳动与对齐难题！
在处理 AI 生成（Midjourney / SD）或拼版精灵大图（Sprite Sheet）时，经常会遇到相邻动作帧的武器刀光、披风相互重叠穿插，导致传统矩形切片工具无法直接使用。
Sprite Animator 是一个纯前端、零外部依赖的高性能 2D 序列帧工作台。它不仅提供了自由选框、网格均等切片与背景透明化能力，还内置了专属交叉隔离修复工具箱（橡皮擦 / 多边形套索 / 魔棒）、九宫格锚点对齐系统以及实时动画播放器，并支持一键导出透明序列帧 ZIP、全新规整无重叠精灵表与高清动图 GIF！
- 零安装、脱机可用：发行版为单一 HTML 文件（
SpriteAnimator.html），双击即可在任意现代浏览器中瞬间启动！
- 拖拽与文件载入：支持 PNG、JPG、WebP 高清大图，高分辨率（2K/4K）流畅渲染。
- ⊞ 均等网格自动切片：
- 内置常用规格一键预设（
3×4、2×5、1×8、4×4等）； - 智能空白过滤：自动分析图像末尾无内容的纯黑/全透明填充格，精准剔除多余空白帧；
- 具备实时尺寸预估与 100 帧安全防呆限制，杜绝浏览器卡顿。
- 内置常用规格一键预设（
- 🔍 连通域自动初选框：基于连通块分析算法，自动识别分离的角色外接矩形。
- ✨ 纯色背景透明化：支持白底、绿幕、黑底一键采样扣除，容差平滑调节。
- 平移缩放视口 (Pan & Zoom)：滚轮平滑以鼠标点缩放（5%~1000%），中键或空格拖拽平移。
- 8 手柄自由伸缩：支持四角与四边手柄任意拖拽，彻底打破传统网格限制，允许相邻选框任意重叠交叉。
- 📐 一键统一尺寸：支持以「当前选中帧」、「全部最大包围盒」或「自定义尺寸」，以脚底中心为固定基准向外扩展，保证整套动作规格完全一致。
- Frame 独立图层机制：每个动作选框拥有独立离屏图层（Mask Canvas），互不污染原图。
- 橡皮擦 (Eraser)：拖拽涂抹自动插值，快速擦除多余伸入的相邻帧武器或杂色。
- 多边形套索 (Lasso)：折线顶点勾勒边缘，双击闭合，精准切除多余复杂轮廓。
- 魔棒去色 (Magic Wand)：基于泛洪填充算法（Flood Fill），点击清除同色系背景残留。
- 历史快照：完整支持 20 步撤销与重做（
Ctrl + Z/Ctrl + Y）。
- 九宫格锚点预设：默认锚定脚底地面中心（Bottom-Center），角色动作落地不晃动。
- 视口准星拖拽：在播放器视口中可直接用鼠标拖动红色十字准星精确重设重心。
- 1px 键盘微调：选中帧后，方向键（
↑↓←→）1px 微调偏移量，按住Shift快速步进 10px。 - 洋葱皮残影 (Onion Skinning)：前一帧淡暖红、后一帧淡冷青残影实时叠显，动作过渡一目了然。
- 高精度时间累加器：基于
requestAnimationFrame+performance.now()，1~60 FPS 任意调节。 - 多种播放模式：循环播放（Loop）、单次播放（Once）、往返乒乓（Ping-pong）。
- 视口比例自适应：自动识别大帧规格缩小适配，支持
自适应完整/25%/35%/50%/75%/100%实时切换。
- 📦 导出透明序列帧 ZIP 包：包含按规范命名的
frame_001.png透明 PNG 序列及animation.json动作元数据。 - 🖼️ 导出规整精灵表 (Sprite Sheet)：重新计算最佳网格布局，带 16px 安全间距，保证生成的大图绝无任何相邻帧交叉重叠。
- 🎞️ 导出透明动图 (.gif)：基于全动作帧包围盒自适应计算最佳尺寸，全身动作与挥刀刀光 100% 完整呈现无裁切。
| 快捷键 | 功能说明 |
|---|---|
Space |
播放 / 暂停切换（或在主画布按住空格拖拽平移） |
V / B / E / L / W |
切换选择 / 拉框 / 橡皮擦 / 套索 / 魔棒工具 |
Ctrl + Z / Ctrl + Y |
撤销 / 重做像素修整 |
↑ ↓ ← → |
当前选框在播放器视口中的基准偏移 1px 微调 |
Shift + 方向键 |
偏移量 10px 快速微调 |
Alt + ← / Alt + → |
播放器单步上一帧 / 下一帧 |
Delete / Backspace |
删除当前选中的动作帧 |
| 滚轮 (Wheel) | 以当前鼠标所在像素为中心平滑缩放视口 |
直接在文件管理器中双击打开根目录下的 SpriteAnimator.html 即可使用，无需启动本地 HTTP 服务器，纯脱机离线可用。
sprite-animator/
├── SpriteAnimator.html # 一键打包后的独立脱机便携单文件
├── index.html # 开发调试页面
├── build_single_file.py # 单文件自动构建打包脚本
├── package.json # 项目描述与脚本
├── css/
│ └── style.css # 专业深色主题样式表
├── js/
│ ├── app.js # 主控制器应用入口
│ ├── core/
│ │ ├── state.js # 全局响应式状态与事件总线 (PubSub)
│ │ ├── image-processor.js# 连通域分析、纯色抠图与空白帧算法
│ │ ├── overlap-isolator.js# 离屏图层、橡皮擦、套索、魔棒与历史栈
│ │ ├── frame-alignment.js# 锚点几何推导、对齐舞台与洋葱皮
│ │ ├── animation-player.js# 动画引擎、帧率定时器与循环播放器
│ │ ├── canvas-workspace.js# 视口平移缩放、选框拖拽与手柄交互
│ │ └── exporter.js # ZIP、新精灵表与动图 GIF 导出器
│ └── vendor/
│ ├── jszip.min.js # 轻量 ZIP 归档库
│ └── gifshot.min.js # 轻量 GIF89a 动图编码库
└── tests/ # 完整单元自动化测试用例
# 运行全部自动化单元测试
node tests/test_size_and_slice.js
node tests/test_exporter.js
node tests/test_overlap_isolator.js
node tests/test_frame_alignment.js每次修改 js/、css/ 或 index.html 后，运行构建脚本重新生成 SpriteAnimator.html：
python build_single_file.py本项目基于 MIT 许可证分发与使用。