UD5工具箱
什么是精灵表（Sprite Sheet）？
精灵表是将多幅图像（通常是动画的每一帧）合并到一张大图中的技术。它广泛应用于游戏开发、网页动画和移动应用中，通过一次性加载一张图来减少HTTP请求次数，提升渲染性能。在CSS动画中，通过改变background-position来逐帧显示不同的动画状态。本工具GIF动画转精灵表生成器可以自动完成这一合并过程。
GIF转精灵表有什么实际用途？
将GIF动画转换为精灵表后，您可以在游戏引擎（如Unity、Godot、Phaser）中使用精灵表实现角色动画；在网页中使用CSS @keyframes配合steps()函数创建高性能逐帧动画；对动画帧进行二次编辑（如修改颜色、添加特效）；以及减小文件体积，因为PNG精灵表通常比GIF更节省带宽。
按行排列和按列排列有什么区别？
按行排列（推荐）：帧从左到右依次排列，排满指定数量后换到下一行。这是最常见的精灵表布局方式，符合从左到右的阅读习惯，也便于CSS steps()动画的水平扫描。按列排列：帧从上到下依次排列，排满指定数量后换到下一列。适用于纵向滚动动画或特殊布局需求。您可以根据目标引擎或框架的要求选择合适的排列方式。
如何选择每行帧数的最佳值？
每行帧数的选择取决于您的使用场景。2的幂次（4、8、16）是游戏引擎偏好的纹理尺寸，有助于GPU优化。如果动画是8帧循环，设置每行8帧可以使布局整洁。尽量让最终精灵表接近正方形，避免过于细长或扁平。本工具支持实时预览，您可以尝试不同数值，观察布局效果后选择最合适的配置。
帧间距有什么作用？
帧间距在每帧之间添加透明间隔像素，主要作用包括：防止不同帧的边缘像素在缩放或渲染时相互渗透（避免纹理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()函数可以轻松实现精灵表动画。设置元素的width和height为单帧尺寸，background属性指向精灵表图片，animation属性使用steps(帧数)定义步进动画，@keyframes中通过改变background-position从第一帧位置到最后一帧位置实现逐帧播放。
这个工具是否在浏览器本地处理文件？
完全本地处理，绝对安全。所有GIF解析、帧提取和精灵表生成都在您的浏览器中完成，使用JavaScript和Canvas API。您的文件不会上传到任何服务器，也不会离开您的设备。即使关闭网络连接，工具也能正常运行（首次加载页面缓存后）。您可以放心处理敏感或私有的GIF动画。
GIF动画帧之间的延迟时间会保留吗？
精灵表本身是静态图像，不包含时间信息。但本工具在帧预览中会显示每一帧的延迟时间（毫秒），方便您在游戏引擎或动画代码中手动设置对应的帧间隔。如果您需要保留时序信息，建议将延迟数据记录在单独的配置文件（如JSON）中，与精灵表一同使用。