Logo
BulkPicTools

GIF 转雪碧图 — 免费在线,无需上传

将动画 GIF 转换为单张雪碧图,用于游戏开发或 CSS 动画。自定义网格布局,免费在线使用。

拖拽或选择 GIF

动画 GIF — 本地转换为雪碧图,无需上传

无水印 • 无需上传 • 免费

GIF 转雪碧图工具的功能

自定义网格行列数

选择列数和行数,将 GIF 帧排列成紧凑的雪碧图。自动计算最佳排列方式。

附带 CSS 动画代码

生成即用的 CSS 动画代码片段(steps() 时序),直接复制到你的网页项目中。

无损 PNG 输出

导出为高质量 PNG 格式雪碧图,适用于游戏引擎、CSS 精灵动画和像素级精确场景。

本地处理,不上传服务器

您的 GIF 文件不会离开设备。所有处理在浏览器中完成,无需担心隐私问题。

使用指南与技巧

为什么要把 GIF 转为雪碧图?开发者指南

将动画 GIF 转换为雪碧图可以获得更好的画质、更小的文件体积和更精准的播放控制。GIF 限制为 256 色且浏览器中缺乏逐帧控制,而雪碧图支持 1670 万色真彩色,并可通过 CSS/JavaScript 进行精确的动画控制。

游戏开发中的雪碧图应用

Unity、Godot 和 Unreal Engine 等游戏引擎原生支持雪碧图导入。将 GIF 转为雪碧图后,可以利用引擎的精灵系统进行逐帧控制、碰撞检测和动画混合。无损 PNG 输出确保像素级的精确度。

CSS 精灵动画

对网页开发者而言,雪碧图可实现使用 background-position 与 steps() 时序的高性能 CSS 动画。这种方式由 GPU 加速,不像 GIF 渲染那样依赖 CPU。工具会生成可直接使用的 CSS 代码,复制粘贴即可。

使用教程

1

上传你的 GIF

拖拽或点击选择动画 GIF 文件,工具自动读取帧数、尺寸和延时信息。

2

设置网格布局

选择雪碧图的列数,行数根据总帧数自动计算。预览会实时更新。

3

生成并复制 CSS

点击「生成雪碧图」创建 PNG 雪碧图,复制附带的 CSS 动画代码即可在网页中使用。

GIF 转雪碧图工具的常见问题

上传动画 GIF,设置网格列数(如 16 帧动画设 4 列 = 4×4 网格),生成雪碧图。输出的 PNG 可直接导入 Unity、Unreal Engine 或 Godot 作为雪碧图纹理使用。