产品经理录动效
需求评审会上，产品经理用 Axure 画了 8 张页面流转图，想演示“点击按钮 → 弹窗 → 确认 → 跳转”的完整交互。静态图贴在一起讲不清时序，开发总误解逻辑。他依次拖入 8 张截图，把帧率设为 0.5 秒/帧，循环 3 次，导出 GIF 附在 PRD 里。开发看一遍动效就知道页面跳转顺序，不再追问“弹窗消失后下一步是啥”。
动图预览GIF Preview
上传 2 张以上图片，点「生成 GIF」
即可在此循环播放预览
即可在此循环播放预览
本地编码：内置零依赖 GIF89a 编码器（中位切分量化 + LZW），全程在浏览器完成，图片不离开本机。帧数 / 尺寸越大，体积与耗时越高。
拖入 / 点击 / 粘贴图片
可多选批量 · 每张即一帧 · 截图 CtrlV 粘贴
Frames encoded locally — nothing uploaded速 度Speed & Loop
200 ms
5 fps
尺 寸Canvas & Fit
600 px
就绪 · 上传 2 张以上图片开始制作 GIF，全程本地处理不上传
第一节
关于本工具
About把几张静态图拖进浏览器，调帧率、设循环、裁画面，几秒内生成一张 GIF。设计师做交互动效示意、运营做产品演示、学生做课件素材，都绕不开这一步。所有处理在本地完成，图片不上传服务器——断网也能用，隐私画面不会外流。
使用场景
电商详情页做对比
淘宝卖家要上架一款保温杯，详情页需要展示“普通杯 vs 保温杯 6 小时后的水温差异”。他拍了 6 张测温仪照片（0h/1h/2h/4h/6h/8h），单张放详情页太占版面，买家划几下就划过了。他把 6 张图合成 GIF，帧率设 1 秒/帧，循环播放，买家一眼看到温度从 95℃ 缓慢降到 42℃ 的过程，比文字“保温 6 小时”更有说服力。
老师做实验演示
初中物理老师讲“水的沸腾”，课堂演示时后排学生看不清温度计读数。她课前用手机拍了 5 张特写照片：水温 80℃、85℃、90℃、95℃、100℃ 时气泡大小变化。用本工具合成 GIF，帧率设 0.8 秒/帧，裁剪掉照片边缘的杂光，投屏到白板上。全班同时看到气泡从锅底冒出、变大、到水面破裂的完整过程，省去重复演示的时间。
设计师做 Logo 提案
品牌设计师给客户设计了 4 个 Logo 方案，每个方案有“标准版 / 反白版 / 单色版”3 种应用形态。分别发 12 张图客户容易看漏，合并成一张长图又显乱。她把每个方案的 3 张图依次拖入工具，帧率设 1.5 秒/帧，循环 5 次，导出 4 个 GIF。客户在微信里逐一点开 GIF，3 秒看完一个方案的全部应用场景，当场选定 2 个方向继续深化。
健身教练教动作分解
线上健身课学员总问“深蹲时膝盖到底要不要过脚尖”。教练在镜子前拍了 4 张侧身照：站立位、下蹲 30°、下蹲 60°、最低点。用本工具合成 GIF，帧率设 0.6 秒/帧，循环播放，并在膝盖位置用手机自带编辑功能画了个红圈。学员在群里看 GIF，清楚看到膝盖轨迹是一条直线，没有内扣或前移，比看视频回放更聚焦关键部位。
第二节
使用指南
Getting Started使用步骤
- 1按顺序上传多张图片（支持 JPG/PNG/WebP），拖拽缩略图可调整帧顺序
- 2在「帧率」滑块处设定每秒播放帧数（1-30），数值越高动画越流畅
- 3勾选「循环播放」使 GIF 无限重复；取消勾选则播放一次后停在最后一帧
- 4点击「裁剪」按钮框选保留区域，拖动四角调整范围，预览区实时显示裁切效果
- 5点击「生成 GIF」按钮，进度条走完后自动弹出下载链接，点击即可保存
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| 上传 3 张图片（尺寸 800×600，格式 JPG），帧率 10fps，循环次数 0（无限循环），不裁剪 | 生成 GIF：尺寸 800×600，帧率 10fps，循环无限，文件大小约 2.3MB | 常规：多图合成 GIF 的典型场景，验证帧率与循环参数生效 |
| 上传 1 张图片（尺寸 1920×1080，格式 PNG），帧率 1fps，循环次数 1，裁剪区域 100×100（左上角） | 生成 GIF：尺寸 100×100，帧率 1fps，循环 1 次，文件大小约 45KB | 常规：单图裁剪后转 GIF，验证裁剪功能与低帧率下的输出 |
| 上传 5 张图片（尺寸 400×300，格式 WebP），帧率 30fps，循环次数 0，不裁剪 | 生成 GIF：尺寸 400×300，帧率 30fps，循环无限，文件大小约 8.1MB | 边界：高帧率（30fps）下多图合成，文件大小可能较大，验证浏览器端性能 |
| 上传 0 张图片（空选择），帧率默认 10fps，循环次数 0，不裁剪 | 提示错误：请至少选择 1 张图片 | 边界：无输入时的错误处理，工具必须给出明确提示而非静默失败 |
| 上传 2 张图片（尺寸 50×50，格式 BMP），帧率 0fps，循环次数 0，不裁剪 | 提示错误：帧率必须大于 0 | 边界：帧率设为 0 的非法值，验证输入校验逻辑 |
| 上传 2 张图片（尺寸 3000×2000，格式 TIFF），帧率 10fps，循环次数 0，裁剪区域 5000×5000（超出原图尺寸） | 提示错误：裁剪区域超出图片尺寸，请调整 | 易错：裁剪区域大于原图时，工具应拒绝而非自动缩小或报错 |
| 上传 2 张图片（尺寸 800×600，格式 JPG），帧率 10fps，循环次数 -1，不裁剪 | 提示错误：循环次数不能为负数 | 易错：循环次数输入负数，用户可能误以为 -1 表示无限，需明确拒绝 |
常见错误对照
1.帧率设置过低导致动画卡顿
✗ 错误
帧率设为 1fps，生成的 GIF 像幻灯片✓ 修复
帧率设为 10-15fps（根据内容动态程度调整）GIF 帧率单位是 fps（帧/秒），低于 8fps 人眼会明显感知卡顿。常见网页动图建议 10-15fps，简单图标可 8fps，复杂过渡可 20fps。
2.循环次数设为 0 但期望无限循环
✗ 错误
循环次数填 0，以为会循环 0 次（即不循环）✓ 修复
循环次数填 0（表示无限循环）或填 1（表示播放一次）GIF 规范中循环次数字段：0 表示无限循环，1 表示播放一次。这是历史遗留约定，与直觉相反。
3.裁剪坐标超出原图边界导致黑边
✗ 错误
原图 200×200，裁剪起点填 (150,150)，尺寸 100×100✓ 修复
裁剪起点填 (0,0)，尺寸 200×200（全图）或确保起点+尺寸 ≤ 原图尺寸裁剪区域若超出原图边界，浏览器/工具会用黑色填充缺失部分。正确做法是保证 x+width ≤ 原图宽，y+height ≤ 原图高。
4.上传图片尺寸过大导致生成失败
✗ 错误
上传 4000×3000 的 10 张照片，期望生成正常 GIF✓ 修复
上传前将图片缩放到 800×600 以内，或使用工具的自动缩放功能GIF 格式每帧存储完整像素数据，大尺寸+多帧会导致文件体积爆炸（几百 MB），浏览器内存不足直接崩溃。建议单边 ≤ 800px。
5.透明背景图片未处理，出现白边
✗ 错误
上传 PNG 透明背景的图标，生成的 GIF 有白色锯齿边缘✓ 修复
上传前将透明区域填充为纯色（如白色），或使用支持透明处理的 GIF 工具GIF 格式不支持 Alpha 通道（半透明），只支持 1 位透明（全透/全不透）。PNG 的半透明边缘在转换时会被硬截断，形成锯齿白边。
6.帧延迟时间单位混淆
✗ 错误
想要每帧停留 0.5 秒，在延迟字段填 0.5✓ 修复
延迟字段填 50（单位是厘秒，即 0.5 秒 = 50 厘秒）GIF 规范中帧延迟单位是厘秒（1/100 秒），不是秒。填 0.5 会被解释为 0.5 厘秒 ≈ 5 毫秒，生成极速闪烁的动画。
7.图片顺序颠倒导致动画倒放
✗ 错误
按时间顺序上传图片：图1→图2→图3，但生成的 GIF 是倒序播放✓ 修复
上传前检查文件命名或拖拽排序，确保第一帧是起始画面多数工具按上传列表顺序合成帧。若文件浏览器默认按名称排序，而图片命名是 10.jpg, 2.jpg，则 10 会排在 2 前面。建议用 01, 02 前缀。
第三节
工作原理
How It Works核心公式
GIF 文件大小 ≈ 帧数 × 每帧像素数 × 颜色深度 / 压缩比
变量说明
帧数总帧数 = 时长 × 帧率每帧像素数宽 × 高，单位像素颜色深度GIF 最多 256 色，8 位压缩比LZW 压缩，典型值 2–5
示例
上传 5 张 800×600 图片，帧率 10 fps，循环 1 次（5 帧），颜色深度 8 位，压缩比取 3：帧数 = 5，每帧像素 = 800×600 = 480000，原始数据 = 5 × 480000 × 8 = 19200000 位 = 2.4 MB，压缩后 ≈ 2.4 / 3 = 0.8 MB。实际输出约 0.8–1.2 MB（因 LZW 压缩率随图像复杂度波动）。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问上传的图片顺序乱了，怎么按我想要的顺序排？＋
答
本工具上传后默认按文件名排序。如果图片顺序乱了，上传前把文件名改成带序号的格式，比如 01.jpg、02.jpg、03.jpg，上传后就会按这个顺序生成。另一种方法是分批上传：先传第一张生成单帧 GIF，再一张一张追加，但比较麻烦。推荐提前在电脑上重命名文件，这是最稳定的做法。
问生成的 GIF 太大了，怎么压缩一下？＋
答
GIF 文件大小主要受三方面影响：帧数、每帧尺寸和颜色数量。本工具中可以通过降低帧率（比如从 10fps 降到 5fps）来减少帧数，或者使用裁剪功能缩小画面尺寸。另外，上传前把原图压缩到 800px 宽以下，也能显著减小输出体积。如果做完还是太大，建议用专门的 GIF 压缩工具二次处理。
问为什么我选了循环次数，但生成的 GIF 还是只播放一次？＋
答
循环次数设置需要配合正确的播放逻辑。如果选了「循环 1 次」，GIF 会播放一遍后停在最后一帧，看起来像只播了一次。如果想无限循环，请选「无限循环」。另外，某些图片查看器（如 Windows 照片应用）默认不播放动画，建议用浏览器打开 GIF 文件确认效果。
问图片尺寸不一样，能统一裁剪吗？＋
答
本工具的裁剪功能是对所有图片统一应用的。比如设置裁剪为 400x300 像素，所有上传的图片都会被裁成这个尺寸，不会逐张单独调整。如果原图比例不同，裁剪后边缘会被切掉，建议上传前把图片统一成相同比例（比如都用 16:9），这样裁剪结果更可控。
问上传的图片会存到你们服务器吗？会不会泄露隐私？＋
答
本工具完全在浏览器本地运行（纯前端实现），上传的图片不会被发送到任何服务器。所有图片处理——包括合成、裁剪、调整帧率——都在你电脑的内存里完成，关闭页面后数据自动清除。所以不用担心隐私泄露，也不需要担心文件被第三方获取。
问最多能上传多少张图？太多会不会卡死？＋
答
本工具没有硬性限制上传数量，但受浏览器内存限制。实测 20 张 1920x1080 的图片合成 GIF 时，内存占用约 500-800MB；如果上传 50 张以上或原图很大，浏览器可能变慢甚至崩溃。建议控制图片在 30 张以内，并提前压缩图片尺寸。如果卡住，刷新页面后分批处理。
问生成的 GIF 颜色不对，比原图灰很多，怎么办？＋
答
GIF 格式最大只支持 256 色，所以颜色丰富的图片（比如渐变、照片）转成 GIF 后必然会有色彩损失，看起来变灰或出现色块。这是格式本身的限制，不是工具问题。如果对色彩要求高，建议改用视频格式（如 MP4/WebM）代替 GIF；如果必须用 GIF，上传前把原图颜色简化（比如转成扁平风格）效果会好很多。
问帧率设成多少合适？设太高会不会变慢？＋
答
常见帧率：10fps 适合简单动画（表情包、演示），15fps 适合动作较流畅的场景（简短教程），24fps 以上接近视频效果但文件会很大。GIF 的播放速度受帧率和每帧延迟共同影响，如果设了 30fps 但感觉卡，可能是每帧延迟设得太大。建议从 10fps 开始试，觉得慢就逐步提高，同时注意文件大小变化。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。