一段动画,一张整齐的精灵图

GIF 转精灵图:把动画帧排成 PNG 网格图

在线把 GIF 转精灵图:将动画帧排列成 PNG 网格,调整列数和间距,再把帧坐标和时长导出为 JSON。

自定义网格布局透明 PNG 输出附带帧数据
GIF 转精灵图
示例帧:机器人跳跃 · 第 1 帧01
示例帧:机器人跳跃 · 第 4 帧02
示例帧:机器人跳跃 · 第 7 帧03

把你的动画,一帧一帧看清楚

打开一个 GIF,或用示例试试,逐帧浏览每个画面。

GIF 动图 · 最大 20 MB · 最多 200 帧
GIF 全程在你的设备上处理,无需账号,不消耗积分。

亲自试一试

从 GIF 动图到整齐的精灵图

来看一段包含 12 个不同帧的机器人跳跃循环。用这个真实的 GIF 示例,看看选帧和网格设置如何改变导出的精灵图。

载入

从现有动画开始

把 GIF 放进工作区,它的完整帧会成为精灵图里的各个格子。

选择

选择要保留的姿势

保留完整的跳跃循环,或只选部分帧,让精灵图更紧凑。

排列

排出整齐的网格

设置列数、帧宽和间距,导出前先预览更新后的 PNG 网格。

robot-jump.gif

原创 12 帧示例 · 可在工作区中打开这个 GIF

逐帧查看序列

把 GIF 序列帧整理成一张精灵图

从一张动图,到一组排列整齐的帧。在工作区中调整网格,适配你的项目。

  • 把 GIF 按原始顺序解码为完整的帧。
  • 选出动画需要的帧。
  • 用内置的播放预览检查序列。
示例动画第 1 帧
01
示例动画第 2 帧
02
示例动画第 3 帧
03
示例动画第 4 帧
04
示例动画第 5 帧
05
示例动画第 6 帧
06
示例动画第 7 帧
07
示例动画第 8 帧
08
示例动画第 9 帧
09
示例动画第 10 帧
10
示例动画第 11 帧
11
示例动画第 12 帧
12

输出由你掌控

设置精灵图的列数、尺寸和间距

用一张 PNG 容纳所有选中的帧。设置帧宽并保持宽高比,再在格子之间留出间距,以适配你的项目。

  • 修改列数,调整网格形状。
  • 调整帧宽,控制输出尺寸。
  • 导出 JSON,包含每个格子的位置、尺寸和延迟。

简单三步

如何把 GIF 转精灵图

从原始文件到可用的成品,只需简单三步。

01

载入 GIF

打开你的动图文件,完整的帧会直接在浏览器中还原。

02

排列帧

选择要包含的帧,然后调整列数、帧宽和间距。

03

导出精灵图

下载所选帧的 PNG 精灵图和 JSON 坐标数据。

用在你的下一个项目里

为游戏和网页项目制作精灵图

01

游戏动画素材

把一段动作序列排进大小统一的格子,并导出坐标,接入你自己的制作流程。

02

网页动画实验

把 PNG 精灵图(雪碧图)和帧时长作为 CSS 或 canvas 动画的素材。

03

动画帧总览

一眼看完整段动作,选帧和布局都由你掌控。

下载 PNG 精灵图和 JSON

PNG 中是排列好的帧,单独的 JSON 则描述它们的坐标和时长。把这些文件接入你的游戏或网页动画工作流即可。本工具只排列 GIF 中已有的帧,不会生成新的姿势。

GIF 转精灵图常见问题

能用它把 GIF 转精灵图(spritesheet)吗?

可以。在这里,精灵图、sprite sheet、spritesheet 和雪碧图指的都是同一种动画帧网格。本工具会把 GIF 中已有的帧排成一张 PNG,并可附带 JSON 坐标和时长,方便接入你自己的动画工作流。

GIF 文件会上传到服务器吗?

不会。GIF 的解码、预览和下载都在你的浏览器中完成。这些工具不调用 AI 接口,无需登录,也不消耗积分。

导出的是完整画面,还是零碎的局部图块?

是完整画面。解码器会根据每个 GIF 帧块的位置、透明度和处置方式(disposal),先把它们合成为完整的帧,再进行导出。

对文件有什么限制?

可打开最大 20 MB、最多 200 帧的 GIF。为控制内存占用,解码后所有帧的总像素上限为 3600 万。大尺寸精灵图最多 3200 万像素。

动画的帧时长会保留吗?

帧数据会以毫秒记录每一帧的延迟。PNG 和精灵图都是静态图片,请在你的动画工具中用这些时间数据还原播放效果。

会用 AI 生成新的精灵图吗?

不会。它只排列 GIF 中已有的帧,不会生成新的姿势、去除背景,也不会插帧补出额外的帧。

GIF 转精灵图

用你的 GIF 生成精灵图

在线把 GIF 转精灵图:将动画帧排列成 PNG 网格,调整列数和间距,再把帧坐标和时长导出为 JSON。

返回工作区