无需登录 数据私有 本地保存

GIF 动画转精灵表生成器 - 按行/列提取帧

10
0
0
0

拖拽 GIF 文件 到此处
或点击选择文件

支持 .gif，最大 50MB

精灵表设置
全部帧
帧预览
精灵表预览

上传 GIF 并点击"生成精灵表"

常见问题与知识点
什么是精灵表（Sprite Sheet）？
精灵表是将多个图像（通常是动画的每一帧）合并到一张大图中的技术。它广泛应用于游戏开发、网页动画和移动应用中，通过一次性加载一张图来减少HTTP请求次数，提升渲染性能。在CSS动画中，通过改变background-position来逐帧显示不同的动画状态。
GIF 转精灵表有什么实际用途？
将GIF动画转换为精灵表后，您可以：
① 在游戏引擎（如Unity、Godot、Phaser）中使用精灵表实现角色动画；
② 在网页中使用CSS @keyframes配合steps()函数创建高性能逐帧动画；
③ 对动画帧进行二次编辑（如修改颜色、添加特效）；
④ 减小文件体积——PNG精灵表通常比GIF更节省带宽。
按行排列和按列排列有什么区别？
按行排列（推荐）：帧从左到右依次排列，排满指定数量后换到下一行。这是最常见的精灵表布局方式，符合从左到右的阅读习惯，也便于CSS steps()动画的水平扫描。
按列排列：帧从上到下依次排列，排满指定数量后换到下一列。适用于纵向滚动动画或特殊布局需求。您可以根据目标引擎或框架的要求选择合适的排列方式。
如何选择"每行帧数"的最佳值？
每行帧数的选择取决于您的使用场景：
① 2的幂次（4、8、16）：游戏引擎通常偏好2的幂次纹理尺寸，有助于GPU优化；
② 与动画周期匹配：如果动画是8帧循环，设置每行8帧可以使布局整洁；
③ 画面比例：尽量让最终精灵表接近正方形，避免过于细长或扁平；
④ 本工具支持实时预览，您可以尝试不同数值，观察布局效果后选择最合适的。
帧间距（Spacing）有什么作用？
帧间距在每帧之间添加透明间隔像素。它的作用包括：
① 防止不同帧的边缘像素在缩放或渲染时相互渗透（避免纹理 bleeding）；
② 使精灵表更易于视觉区分每一帧的边界；
③ 在某些游戏引擎中，间距可以简化纹理采样的计算。通常建议设置0-2像素的间距，过大的间距会浪费纹理空间。
为什么我的GIF解析失败？
可能导致解析失败的原因：
① 文件不是有效的GIF格式（请确认文件扩展名为.gif且文件头正确）；
② GIF文件已损坏或不完整；
③ 文件过大（超过50MB），建议先使用其他工具压缩GIF；
④ 浏览器版本过旧，不支持所需的Canvas API。建议使用Chrome、Firefox或Edge的最新版本。如果问题持续，请尝试重新保存GIF文件后再上传。
生成的精灵表是什么格式？可以调整质量吗？
生成的精灵表为PNG格式（无损压缩），保留完整的透明通道。这意味着：
① GIF中的透明区域在精灵表中保持透明；
② PNG无损格式确保每一帧的像素精确还原，不会出现GIF那样的颜色量化损失；
③ 您可以使用缩放选项（25%-200%）来控制输出尺寸。缩小可减小文件体积，放大则保留更多细节。下载后可使用TinyPNG等工具进一步优化文件大小。
精灵表在CSS动画中如何使用？
使用CSS steps()函数可以轻松实现精灵表动画：
.sprite {
  width: 64px; height: 64px;
  background: url('spritesheet.png');
  animation: play 0.8s steps(8) infinite;
}
@keyframes play {
  from { background-position: 0 0; }
  to { background-position: -512px 0; }
}
其中steps(8)表示8帧，-512px是8帧×64px的偏移量。
这个工具是否在浏览器本地处理文件？文件会上传到服务器吗？
完全本地处理，绝对安全。所有GIF解析、帧提取和精灵表生成都在您的浏览器中完成，使用JavaScript和Canvas API。您的文件不会上传到任何服务器，也不会离开您的设备。即使关闭网络连接，工具也能正常运行（首次加载页面缓存后）。您可以放心处理敏感或私有的GIF动画。
GIF动画帧之间的延迟时间会保留吗？
精灵表本身是静态图像，不包含时间信息。但本工具在帧预览中会显示每一帧的延迟时间（毫秒），方便您在游戏引擎或动画代码中手动设置对应的帧间隔。如果您需要在精灵表中保留时序信息，建议将延迟数据记录在单独的配置文件（如JSON）中，与精灵表一同使用。
🔧 相关工具