跳到主内容
UniKit

GIF 制作

把多张图片合成为动图 GIF:按文件名自然排序、自定义帧延时与循环次数、输出最大边缩放与调色板色数,用 Canvas 取像素后本地编码 GIF89a。

浏览器本地运行所有计算都在你的浏览器里完成,数据不会离开本机。

图片只在浏览器本地合成 GIF,不会上传

先选择至少两张图片作为动画帧,可以一次选多张

生成 GIF

100ms
256

生成结果

这个工具能做什么

  • 把连拍照片或渲染序列合成一张动图:多选图片后按文件名自然排序(frame2.png 排在 frame10.png 前面),一键生成 GIF。
  • 做演示或教程时控制节奏:帧延时按毫秒设置,循环次数 0 表示无限循环,也可以指定只播几次。
  • 发到聊天工具或论坛前先压体积:限制输出最大边并调低调色板色数,GIF 文件会明显变小。
  • 不想把素材传到第三方网站:整个过程在浏览器本地用 Canvas 取像素、自写 LZW 与 GIF89a 编码器输出文件。

示例

输入

3 张 8×8 纯色图片,帧延时 120 ms,循环 0(无限),调色板 4 色

输出

帧数 3;画布尺寸 8 × 8;调色板 4 色;输出 126 B;文件名 animation-3f.gif

读取图片像素需要浏览器的 Canvas 解码,所以示例里的尺寸与体积来自工具的编码逻辑本身(GIF89a 字节流、LZW 压缩)。调色板由像素做中位切分量化生成,色数越少文件越小、渐变越容易出现色带。

常见问题

帧顺序是按什么排的?

默认按文件名自然排序,所以 frame2.png 会排在 frame10.png 前面,而不是按字典序把 10 放在 2 前面。排完还能在列表里手动上移/下移调整,导出前请确认第一帧是动画起点。

为什么输出的 GIF 有明显色带?

GIF 最多 256 色,工具会对所有帧做中位切分量化把颜色压缩到指定色数。照片和渐变图色数越低越容易出现色带,把色数调到 256 能缓解但文件会变大;纯色或扁平插画基本看不出差别。

帧延时和实际播放速度不一致是怎么回事?

GIF 规范里延时以 1/100 秒为单位,所以设置值会被取整到 10 ms 的倍数。另外很多浏览器会把小于 20 ms 的延时当作 100 ms 处理,工具因此把下限设为 20 ms、上限 2000 ms。

为什么我的图片没被识别?

工具用浏览器的图片解码能力读像素,只有浏览器本身能解码的格式(PNG、JPEG、WebP、GIF 等)才行;无法解码的文件会被跳过并提示,不会中断整个合成过程。

图片会上传吗?生成的文件存在哪?

不会上传。图片只在你的浏览器里解码、缩放、量化并编码,生成的 GIF 是本地 Blob,点下载才会保存到你的电脑。

关键词:gif 制作动图合成 gif帧动画gif makeranimated gifimage to gifframe animationlzwquantize

同类工具