祈灵工具箱

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

做游戏或像素动画时，角色动作通常画在一张精灵图（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. 1上传精灵图，确认自动识别的网格，必要时手动修改行列数、格子尺寸、边距和间距
  2. 2设置帧顺序、帧率、来回播放，用洋葱皮和逐帧偏移修正动作
  3. 3导出 GIF、APNG、动态 WebP 或帧 ZIP；或切到“多帧 / GIF → 精灵图”合成精灵图和 JSON

常见问题

自动识别网格是怎么做的？识别错了怎么办？
工具先判断每一列、每一行是不是完全透明（图片没有透明通道时，按左上角的背景色判断），再分析这些空白分隔线：内容块等宽、间隔一致时，直接得到格子大小、外边距和间距；否则寻找能把整张图等分、且所有分界线都落在空白处的最大列数。如果格子之间没有任何空隙，就无法自动识别，请直接填写行列数或格子尺寸。
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 会记录内容在原帧中的位置，引擎会自动还原。