GIFFrame：在浏览器中制作和编辑 GIF 动画

根据手上的素材选择工具

先看素材，再决定要达到的结果。如果手上是 JPG、PNG 或 WebP，图片制作工具可以将它们排列为带有帧时间的动画。如果已有 GIF，则按修改目标打开对应工具。文件体积过大适合压缩，画面宽高不合适则应调整尺寸。把这两个问题分开，可以避免在尺寸已经合适时继续缩小画面。需要连续进行多种修改时，也可进入高级编辑器。 接下来可以使用图片转 GIF。

从图片制作容易看懂的循环

好懂的动画要让观众看清变化。制作产品教程时，可以先准备尺寸接近的截图，让重要界面区域保持在相近位置，再到时间轴排列。文字较多的说明帧适合停留更久，简单过渡则可以短一些。循环会从最后一帧直接回到第一帧，因此首尾也要一起检查。照片序列应选择有不同内容的图片，减少无意义的重复，同时保留原图方便之后修改。

分享前分别检查体积与尺寸

分享前，既要检查画面，也要检查文件。先确定实际显示大小，再比较下载文件与目标入口的体积要求。画布已经合适时可先压缩；原件远大于显示区域时则可先缩放。Discord 表情预设可以提供尺寸起点，其他场景也能自定义宽高。是否接受文件仍由目标入口决定。最终应在实际显示大小下预览，确认小字仍能阅读。

通过时间和方向改变表达

相同图片也能通过节奏和顺序表达不同意思。调速会把新的停留时间写入导出 GIF，让教程更容易阅读，或让缓慢反应更紧凑。倒放会反转帧顺序，例如把打开动作变成关闭动作。请查看导出副本，而不是只依赖播放器的速度设置。尝试多个时间版本时，可重新打开原件后分别处理，方便判断哪一种节奏真正改善了表达。

复用静态帧并整理纯色背景

后续工作有时需要静态图而非新动画。拆帧会把编号 PNG 打包为 ZIP，便于选择代表性时刻、观察姿态或重建较短序列。要保留原来的节奏时，可以另外记录重要停顿。简单图形还可以通过移除背景色获得透明区域。选色后应检查全部帧，因为主体内部的匹配颜色也会受影响；清楚且与主体不同的底色更适合作为起点。 接下来可以使用提取帧。

独立工具页和高级编辑器怎么选？

一次修改就能完成任务时，独立工具页更直接：相关控件集中展示，步骤放在工作区下方。如果项目需要先改帧、再改画布、最后调整时间，则可以在高级编辑器中连续操作。两种方式都使用你提供的素材。新图形可以先在设计软件中准备，再把导出的图片放到这里排列。建议保留原件并清楚命名不同导出版本，后续修改时更容易找到合适起点。

常见问题

这些工具可以免费使用吗？

本地浏览器处理流程不需要账号或付费导出。选择对应工具、打开文件后即可保存结果。大动画由设备处理，可能需要更长时间。

应该先用哪个工具？

先选择直接解决问题的操作：图片合成、体积压缩、像素缩放、时间调整、帧顺序倒放、提取帧或移除纯色。先检查这一项的结果，再决定是否组合其他修改。