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

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

103
0
0
0
第一步:上传GIF文件

打开GIF动画转精灵表生成器页面,您可以通过两种方式上传GIF文件:直接将文件拖拽到上传区域,或者点击上传区域选择文件。工具支持标准GIF格式,文件大小上限为50MB。上传成功后,工具会自动开始解析GIF文件并提取所有帧。

第二步:查看帧预览

GIF解析完成后,下方的帧预览区域会以缩略图形式展示每一帧的画面内容。每帧旁边会标注该帧的延迟时间(毫秒),这是原始GIF中设定的帧间间隔。请仔细检查帧的顺序和内容是否正确,确保所有帧都已成功提取。如果帧数或内容不符合预期,请确认上传的GIF文件是否完整有效。

第三步:配置精灵表参数

在精灵表设置区域,根据您的需求调整以下参数:排列方向选择按行排列(推荐)或按列排列;每行帧数设置每行包含的帧数量,建议使用4、8、16等2的幂次值;帧间距设置帧与帧之间的间隔像素,通常0到2像素即可;缩放选择输出的缩放比例,100%为原始尺寸。还可以通过帧范围选项选择导出全部帧或指定范围的帧。

第四步:生成精灵表

参数配置完成后,点击「生成精灵表」按钮。工具会在浏览器本地执行图像合成操作,将所有帧按照设定的排列方式拼接到一张大图中。整个过程通常在几秒内完成,具体时间取决于帧数量和缩放比例。生成结果会在精灵表预览区域展示,您可以直观查看最终效果。

第五步:下载精灵表

确认精灵表效果满意后,点击「下载PNG」按钮即可将精灵表保存到本地。生成的文件为PNG格式,无损压缩,完整保留透明通道。如果预览效果不理想,您可以返回第三步调整参数后重新生成,直到获得满意的布局和尺寸。

使用提示

在游戏引擎中使用精灵表时,需要根据每帧的尺寸和排列方式计算纹理坐标。例如Unity的Sprite Editor可以自动切片精灵表。在CSS动画中,使用steps()函数配合background-position属性即可实现逐帧动画。建议将帧延迟时间记录在单独的配置文件中,与精灵表一同使用,以确保动画节奏正确。