这篇 GIF 动画制作教程 会带你从空白画布开始，完成一个能循环播放的三帧手绘动画。示例是一张会弹动、会变表情的黄色小脸；同样的方法也能画眨眼、挥手、跳动爱心或简单表情包。
这里不是把视频转成 GIF，也不会用 AI 自动生成动画。每一帧都由你自己画。WigglyPaint 的笔触本身会轻微抖动，再配合逐帧播放，就能得到更有手绘感的循环动画。
这篇 GIF动画制作教程 讲的是自己画每一帧，而不是上传视频或照片。这里的“帧”就是一张画，“循环”是最后一张接回第一张，“洋葱皮”是上一帧的浅色参考。把这三个概念弄懂，就能完成一张清楚的 GIF动画，也不会和更宽泛的“动画制作”教程混在一起。
先看最短步骤
画好第一帧，复制画面，只改会动的部分，再加一帧，预览“最后一帧回到第一帧”的衔接，最后导出 GIF。
开始前先做四个决定
- 只画一个主体和一个动作。
- 先用两三种对比清楚的颜色。
- 主体画大一点，缩成聊天预览也能看清。
- 第一张作品先控制在三到四帧。
手绘 GIF 动画怎么做
1. 画好第一帧
打开 WigglyPaint，选画笔和颜色，画出动作的起点。示例先画睁眼的小脸。第一帧常常会成为静态预览图，所以即使还没播放，也应该能看懂。
2. 展开动画面板
点击底部的 Animation frames。你会看到帧缩略图、播放按钮、洋葱皮按钮和一个大加号。继续之前，先确认第一帧处于选中状态。
3. 复制这一帧
如果下一张只需要改眼睛、嘴巴或位置，就用 Copy frame。这样主体不会突然变形。只有下一帧完全不同时，才需要点大加号新建空白帧。
4. 打开洋葱皮
点击幽灵形状的洋葱皮按钮，上一帧会以浅灰色显示在画布上。它只是对齐用的参考线，不会出现在最终 GIF 里。想让动作顺滑，就靠近灰色位置来画。
5. 补上第三个动作
再复制一次，并做一个小变化。弹跳可以用“上—下—上”，眨眼可以用“睁—闭—睁”。第一次做 逐帧动画，三个清楚的动作已经足够。
6. 连续预览循环
点播放，至少看三轮。不要只看中间动作，还要看最后一帧回到第一帧是否突兀。如果太快，可以复制需要停留的帧。WigglyPaint 目前没有单独的 FPS 或每帧时长设置。
7. 导出后重新打开
点击 Export，保留 GIF 格式并保存。再用浏览器或支持动图的应用打开文件，确认它真的会动、缩小后仍能看清，而且循环衔接自然。
完成后的 GIF 是什么样
下面就是本教程实际导出的文件。它故意没有画很多细节：主体够大、颜色够平、每帧只改位置和表情，所以放进聊天窗口或信息流里也容易看懂。
让动图更适合发送和分享
- 减少主体周围的大块空白。
- 每一帧只改变一个主要动作。
- 用大形状，不要一开始就画很小的细节。
- 复制同一帧，可以让这个动作多停一会。
- 重点检查最后一帧回到第一帧。
- 发布前先打开下载文件。
加细节前，先了解 GIF 的限制
GIF 本身没有声音，每一帧最多使用 256 种颜色。少量平涂颜色、清楚轮廓和短循环，通常比渐变、照片质感或很长的动作更清晰，文件也更小。需要配音、音乐或长剧情时，GIF 就不是合适的最终格式。
常见问题怎么处理
- 动画播放太快： 把需要停留的那一帧复制一两次。
- 循环时突然跳一下： 对比最后一帧和第一帧，让位置更接近，或增加一个过渡动作。
- 主体越画越大或越画越小： 打开洋葱皮，先对齐不动的部分，再画会动的部分。
- 导出后只有一张图： 确认每个缩略图里都有内容，而且增加完所有帧后才点击导出。
- 文件太大或画面发糊： 减少帧数、颜色和无用空白，不要堆太多细节。
- 下载后看起来不动： 换浏览器或支持 GIF 的应用打开；有些相册预览只显示第一帧。
这个 GIF 可以用在哪里
短循环很适合做聊天表情、社交媒体配图、头像装饰、课堂示例或小游戏灵感。GIF 没有声音，所以动作本身要能说明意思。想先弄懂每一个动画按钮，可以看逐帧手绘动画入门；还想找灵感，可以看适合新手的动画网站。
常见问答
可以免费制作 GIF 动画吗？
可以。你能直接在 WigglyPaint 网页版里画帧并导出 GIF，不用安装桌面软件。
能把已有照片或视频自动变成动画吗？
不能。这套流程是自己逐帧画，不是图片转动画或视频转 GIF 工具。
新手用多少帧最合适？
先用三到四帧。只有动作衔接不够顺时，再补过渡帧。
可以单独调某一帧的速度吗？
目前没有每帧时长设置。复制同一帧，就能让这个动作停留更久。
怎样让循环看起来无缝？
把最后一帧和第一帧放在一起比较，让主体位置接近；如果仍然突兀，就补一张回到起点的过渡帧。
GIF 可以带声音吗？
不可以。GIF 格式不保存音频，动作和停顿需要在没有声音时也能表达意思。
这个网页流程可以导出视频吗？
这篇教程对应的是网页编辑器的 GIF 导出流程，不承诺从同一套帧直接得到视频文件。