GIF文件上传与帧提取
支持拖拽或点击上传GIF格式动画文件,最大支持50MB。工具自动解析GIF文件结构,逐帧提取每一幅画面,包括帧的尺寸、像素数据和延迟时间信息。解析完成后,所有帧会在预览区域以缩略图形式展示,方便用户确认帧内容和顺序。
灵活的排列方式选择
提供按行排列和按列排列两种布局选项。按行排列时,帧从左到右依次排列,排满指定数量后换到下一行,这是最常用的精灵表布局方式,符合CSS steps()动画的水平扫描逻辑。按列排列时,帧从上到下依次排列,适用于纵向滚动动画或特殊布局需求。
自定义每行帧数
用户可以自由设置每行(或每列)包含的帧数量。推荐使用2的幂次值(如4、8、16),因为游戏引擎通常偏好2的幂次纹理尺寸,有助于GPU优化和纹理过滤。工具支持实时预览,您可以尝试不同数值观察布局效果后选择最合适的配置。
多档缩放支持
提供25%、50%、100%、150%、200%共五档缩放选项。缩小输出可以显著减小精灵表文件体积,适合移动端和Web性能敏感场景;放大输出则保留更多像素细节,适合高清显示需求。缩放后的精灵表依然保持PNG无损格式,确保像素精度。
帧间距设置
支持自定义帧间距(单位:像素),在每帧之间添加透明间隔。适当设置间距可以防止不同帧的边缘像素在缩放或渲染时相互渗透(即纹理bleeding问题),同时使精灵表更易于视觉区分每一帧的边界。通常建议设置0到2像素的间距值。
逐帧预览与延迟信息
在帧预览区域,每一帧都以缩略图形式展示,并标注该帧的延迟时间(毫秒)。这些时序信息对于在游戏引擎或动画代码中设置正确的帧间隔至关重要。精灵表本身是静态图像不包含时间信息,但预览中的延迟数据可以帮助您手动配置动画节奏。
PNG格式下载
生成的精灵表以PNG格式提供下载,这是一种无损压缩图像格式,完整保留GIF中的透明通道信息。PNG格式确保每一帧的像素被精确还原,不会出现GIF颜色量化带来的质量损失。下载后可使用TinyPNG等工具进一步优化文件大小。
完全本地处理
所有文件处理操作均在浏览器本地完成,使用JavaScript和Canvas API进行GIF解析、帧提取和图像合成。文件不会上传到任何服务器,即使断开网络连接,工具在首次加载缓存后也能正常运行。这是保护用户数据隐私的核心设计原则。
UD5工具箱