# 精灵图动画工具 - Sprite Sheet 切帧预览与导出 GIF/APNG

> 免费在线精灵图动画：按行列或格子尺寸切帧、自动识别网格，设置帧序、帧率与洋葱皮，导出 GIF、APNG、动态 WebP 或帧 ZIP。

- 网址: https://qilingtools.com/zh/image/sprite-animate
- 分类: 图片工具 (https://qilingtools.com/zh/image)
- 标签: [图片](https://qilingtools.com/zh/tags/image), [设计配色](https://qilingtools.com/zh/tags/design), [前端网页](https://qilingtools.com/zh/tags/frontend)
- 最后更新: 2026-10-26
- 价格: 免费，无需注册
- 隐私: 在浏览器本地处理，文件不上传服务器

做游戏或像素动画时，角色动作通常画在一张精灵图（Sprite Sheet）上。上传精灵图后，工具会根据透明的分隔线（没有透明通道时按背景色）自动识别网格：等分格子、带外边距和间距的格子都能认出来，识别不准也可以手动按行列数或格子尺寸设置，外边距、间距分别可调，空白格会自动跳过。帧顺序支持 1-8、8-1、3,5,7、1-4x2 这样的写法，可以开启来回播放（ping-pong），帧率 1–60 fps 可调。预览区支持像素风不平滑放大、棋盘格/纯色背景、洋葱皮显示前后帧，暂停后逐帧查看，如果某一格画得偏了，还能按像素微调这一格的偏移来消除抖动。导出可选 1–8 倍放大：GIF（保留透明）、APNG（在本页直接拼装 fcTL/fdAT 块，完整 8 位透明度）、动态 WebP（无损），或者每帧一张 PNG 的 ZIP。反过来，也可以把多张帧图片或一个 GIF 动图合成精灵图：自动或指定列数、帧间距、裁掉透明边、2 的幂尺寸，同时生成 TexturePacker 兼容的 JSON（Hash 或 Array 格式）和带逐帧动画的 CSS。全部在浏览器本地完成，文件不会上传。

## 使用步骤

1. 上传精灵图，确认自动识别的网格，必要时手动修改行列数、格子尺寸、边距和间距
2. 设置帧顺序、帧率、来回播放，用洋葱皮和逐帧偏移修正动作
3. 导出 GIF、APNG、动态 WebP 或帧 ZIP；或切到“多帧 / GIF → 精灵图”合成精灵图和 JSON

## 功能特点

- 按透明分隔线或背景色自动识别网格
- 按行列数或格子尺寸切分，外边距与间距可调，跳过空白格
- 帧序表达式（范围、倒序、重复）与来回播放
- 像素风放大、洋葱皮、逐帧查看、单格像素偏移
- 导出 GIF、APNG（自写 fcTL/fdAT）、无损动态 WebP、帧 PNG ZIP，1–8 倍放大
- 多帧图片或 GIF 合成精灵图，可裁透明边、2 的幂尺寸
- TexturePacker 兼容 JSON（Hash/Array）与 CSS 逐帧动画
- 纯本地处理，不上传

## 常见问题

### 自动识别网格是怎么做的？识别错了怎么办？

工具先判断每一列、每一行是不是完全透明（图片没有透明通道时，按左上角的背景色判断），再分析这些空白分隔线：内容块等宽、间隔一致时，直接得到格子大小、外边距和间距；否则寻找能把整张图等分、且所有分界线都落在空白处的最大列数。如果格子之间没有任何空隙，就无法自动识别，请直接填写行列数或格子尺寸。

### APNG 和 GIF 有什么区别，该选哪个？

GIF 最多 256 色、透明只有“全透明或不透明”两档，半透明边缘会出现锯齿或杂边；APNG 是真彩色加完整 8 位透明度，主流浏览器都能播放，适合有柔和边缘、渐变的动画。像素画颜色少，GIF 体积往往更小；需要放在网页或聊天软件里且边缘干净，可以选 APNG 或动态 WebP。

### 逐帧偏移有什么用？

手绘或从视频截出来的帧，角色位置常有一两个像素的偏差，播放时会抖。暂停后选中那一帧，用方向键按钮按像素移动这一格的内容即可。偏移记在格子上，帧序里多次用到同一格时会一起生效，导出时也会保留。

### 生成的 JSON 能在游戏引擎里用吗？

JSON 采用 TexturePacker 的通用格式（frames 中包含 frame、rotated、trimmed、spriteSourceSize、sourceSize，以及每帧 duration 和 meta 信息），Phaser、PixiJS、Cocos 等能读取 TexturePacker JSON 的引擎都可以直接加载。勾选裁掉透明边时，spriteSourceSize 会记录内容在原帧中的位置，引擎会自动还原。

## 相关工具

- [PDF 转图片](https://qilingtools.com/zh/pdf/to-image): 免费在线 PDF 转图片工具：将 PDF 每一页渲染为高清 JPG 或 PNG 图片，可选 72/150/300 DPI，批量打包下载，本地处理不上传。
- [图片转 PDF](https://qilingtools.com/zh/pdf/from-image): 免费在线图片转 PDF 工具：把多张 JPG、PNG、WebP 图片按顺序合成一个 PDF，支持 A4 或按图片尺寸排版，本地处理不上传。
- [图片压缩](https://qilingtools.com/zh/image/compress): 免费在线图片压缩工具：批量压缩 JPG、PNG、WebP 图片体积，可调质量与最大尺寸，显示压缩前后对比，本地处理不上传。
- [图片改尺寸](https://qilingtools.com/zh/image/resize): 免费在线图片缩放工具：按像素宽高或百分比批量修改图片尺寸，可锁定比例，支持 JPG/PNG/WebP，本地处理不上传。
- [图片格式转换](https://qilingtools.com/zh/image/convert): 免费在线图片格式转换工具：把 JPG、PNG、WebP、GIF、BMP 等图片批量转换为 JPG、PNG 或 WebP，本地处理不上传。
- [图片加水印](https://qilingtools.com/zh/image/watermark): 免费在线图片水印工具：批量给图片添加文字水印，支持位置、平铺、透明度、字号、颜色设置，本地处理不上传。
- [长图拼接](https://qilingtools.com/zh/image/stitch): 免费在线图片拼接工具：把多张截图或照片按纵向/横向拼接成一张长图，可设置间距与背景色，本地处理不上传。
- [抠图去背景](https://qilingtools.com/zh/image/remove-bg): 免费在线抠图工具：AI 自动识别人像、商品、动物等主体，一键去除背景生成透明 PNG，也可换成白/红/蓝等纯色底（证件照换底色）。浏览器本地处理，图片不上传。