像素小猫走路
GIF 转精灵图后排成一行 6 帧，这种横条布局大多数引擎都能直接读取。
GIF 转精灵图：每一帧排进一张 PNG
放入一张动态 GIF，每一帧都会排到一张精灵图（sprite sheet）PNG 上，并附带 JSON 图集和 CSS 动画。这款免费的 GIF 转精灵图工具也能打开动态 WebP、PNG 和短视频，全部在你的浏览器里完成。
GIF 转精灵图免费 · 在浏览器里运行
把 GIF 拖到这里
动态 GIF、WebP、PNG，或一段 MP4、WebM 短视频，全程在你的浏览器里处理。
- 免费，在浏览器里运行
- GIF、WebP、PNG 和视频
- 行列布局与四周留白
- PNG、JSON 图集和 CSS
GIF 转精灵图示例
8 段专门为本页制作的动画，每段都用本页的转换工具排成精灵图。点开任意一个，所有设置都能亲手试一遍。
扇动翅膀的蓝鸟
4 帧排在 2 的幂尺寸的精灵图上，1024 × 1024，正好给有这项要求的引擎用。
闪烁的火把
6 帧缩到一半尺寸，做成一张小巧的精灵图，适合用图块搭场景的游戏。
加载转圈动画
8 帧排成一张方形精灵图，直接用来做 CSS 加载动画。
飘浮的幽灵
4 帧排成一列，适合从上往下播放精灵图的引擎。
跳动的爱心图标
4 帧各留 4 像素的四周留白，边缘始终干净，不会渗进相邻的帧。
挥手的机器人
4 帧排成一行，帧与帧之间留出 4 像素间隔。
火箭尾焰
4 帧闪动的火焰，排在一张接近方形的精灵图上。
3 步完成 GIF 转精灵图
三步完成，文件全程不上传。
拖入、粘贴或选择动态 GIF、WebP、PNG，或一段 MP4、WebM 短视频。每一帧都在你的设备上读取。
保留全部帧或其中一段，每隔几帧取一帧，去掉重复的帧，再设置列数、四周留白、间隔和帧尺寸。
保存精灵图 PNG、记录每帧时长的 JSON 图集、CSS 动画，或把单帧 PNG 打包成一个 ZIP。
这款 GIF 转精灵图工具最擅长什么
它最拿手的六件事，从像素行走循环到网页加载动画都能处理。
- 动画
GIF、WebP、PNG 和短视频
打开动态 GIF、动态 WebP 或 PNG，或一段 MP4、WebM 短视频。每一帧都按看图软件显示的样子读出，GIF 里相互叠加的帧也能完整还原。
只留你需要的帧
保留一段范围，每隔一帧或两帧取一帧，再去掉重复的帧。跳过的帧把时长交给前一帧，动画速度保持不变。
适配每种引擎的布局
接近方形、一行、一列或自定义列数，再加上四周留白、间隔和 2 的幂尺寸，每次 GIF 转精灵图都能贴合你的引擎。
JSON 图集和 CSS 动画
JSON 图集按 Phaser 和 PixiJS 读取的格式记录每一帧的位置和时长；CSS 文件能在任何网页上播放这张精灵图。
帧尺寸与像素画
把帧缩小到四分之一或一半，得到更小的精灵图；也能把像素画放大 2× 或 4×，像素依旧锐利。下载前就能看到精灵图的尺寸。
免费，保护隐私
完全在你的浏览器里运行：不上传、不用注册、没有水印，页面加载完成后断网也能继续用。
GIF 转精灵图指南：从任意动画得到干净的精灵图
五条简短技巧，帮你把任意动画排成干净的精灵图。
选择引擎读取的布局
「一行」适合大多数动画工具和 CSS；「接近方形」让大动画的精灵图保持在纹理尺寸以内；「一列」适合从上往下读取精灵图的引擎。
精简帧数
设好「起始帧」和「结束帧」只留一个循环，用「每隔几帧」把长动画减半。打开「去掉重复的帧」，就能去掉有些 GIF 用重复帧做出的停顿。
四周留白和间隔
帧在游戏里缩放时，加 1 到 4 像素的四周留白，边缘就始终干净，看不到相邻的帧。「间隔」在格子之间留出空间，方便编辑。
留意精灵图尺寸
尺寸显示在精灵图下方。用在手机上时，调小帧尺寸或增加列数，就能让每边保持在 4,096 像素以内；引擎有要求时，打开「尺寸取 2 的幂」。
用上图集或 CSS
在引擎里把 PNG 和 JSON 图集一起载入，就能按名称和时长取到每一帧。网页上则链接 CSS 文件，给元素加上对应的 class。
谁在用 GIF 转精灵图
把动画转成精灵图的常见理由。
游戏开发者
把 GIF 动图和视频片段导入游戏引擎，变成一张带命名帧的纹理。
网页设计师
用一张 PNG 加一小段 CSS 动画，换掉体积大的 GIF。
UI 和 App 设计师
把加载动画和图标动效转成精灵图，用在 App 和界面里。
动画师和 Mod 作者
把动画的每一帧收进一张精灵图，方便编辑、分享或做 Mod。
GIF 转精灵图常见问题
关于把动画转成精灵图、文件和隐私的解答。
打开 GIF，选好帧和列数，再下载精灵图 PNG；需要的话，一并下载 JSON 图集或 CSS。
免费。它完全在你的浏览器里运行，不用注册账号，也不加水印。
不会。动画在你的设备上读取并排成精灵图，不会发送到任何服务器。
能。动态 WebP 和 PNG 在 Chrome、Edge 和 Safari 里都能打开，MP4 或 WebM 短视频按每秒 12 帧读取。
每一帧的时长都保存在 JSON 图集和 CSS 里。跳过的帧会把时长交给前一帧，所以循环一遍的时间和原 GIF 一样长。
动画最常用「一行」；「接近方形」让长动画更紧凑；「一列」适合从上往下读取精灵图的引擎。
Phaser、PixiJS 以及许多其他引擎和工具都能读取 JSON hash 格式，它列出每一帧的名称、在精灵图上的位置和时长。
能。需要 GIF 转序列帧时，用「单帧（ZIP）」把保留下来的每一帧各存成一个 PNG，按顺序命名编号。