逐帧动画怎么做？WigglyPaint 新手入门教程

在 WigglyPaint 里制作逐帧动画，就是连续画几张稍有不同的图，再让这些图按顺序播放。每一张图叫作一“帧”。只要相邻画面有一点变化，眼睛就会把它看成动作。

所有画面都由你自己绘制。WigglyPaint 不会用 AI 自动生成动画，也不会把已有图片或视频一键转换成动画。这篇教程会从第一笔开始，带你完成一个可以循环播放和下载的 GIF。

什么是逐帧动画？

一帧就是一张画。把几张画连续播放，就能形成逐帧动画。

例如，第一帧画睁开的眼睛，第二帧把眼睛画成闭合状态。两帧连续播放时，角色看起来就像在眨眼。

WigglyPaint 里有两种动态：

1. 画笔线条本身会轻微抖动；
2. Animation 面板会依次播放你画出的不同画面。

两种动态可以叠加使用。你既可以让线条保持手绘抖动感，也可以让角色挥手、花朵开放、圆球弹跳或表情发生变化。

WigglyPaint 适合做什么动画？

WigglyPaint 是一款可以直接在浏览器中使用的免费逐帧动画工具，不需要先安装桌面软件。

目前可以：

• 新建动画帧；
• 复制已有帧；
• 删除不需要的帧；
• 用洋葱皮查看上一帧；
• 循环预览动画；
• 导出 GIF；
• 把完成的作品分享到 WigglyPaint Community。

它更适合短小的手绘动画、动态涂鸦、表情、贴纸、角色动作和简单练习，不适合制作带有复杂时间线的长视频。

开始前先准备好这些

• 建议先使用电脑浏览器，屏幕更大，按钮也更容易看清。
• 第一次只画一个主体、一个动作，例如眨眼或圆球弹跳。
• 颜色先控制在两到三种，画面会更容易观察。
• 不需要追求精细。先让动作清楚，再增加细节。

逐帧动画制作步骤

第 1 步：打开绘画画布

• 点击哪里： 打开中文版 WigglyPaint，点击 Click to start drawing。
• 你会看到： 完整画布、画笔和其他绘画工具。
• 接下来： 选择画笔和颜色。

第一张图尽量画得大一些、简单一些。头像、星星、花朵和圆球都适合第一次练习。

第 2 步：打开 Animation 面板

• 点击哪里： 点击编辑器底部的 Animation 栏。
• 你会看到： 动画帧缩略图、播放按钮、洋葱皮按钮和一个较大的加号。
• 接下来： 确认第一帧处于选中状态。

带有选中边框的缩略图，就是你当前正在编辑的动画帧。以后需要修改某一帧时，直接点击对应的缩略图。

第 3 步：画好第一帧

• 需要做什么： 画出角色或物体的起始状态。
• 你会看到： 画布上的内容也出现在第一张帧缩略图中。
• 接下来： 先完成主要轮廓，再添加下一帧。

如果准备制作眨眼动画，第一帧可以画睁开的眼睛；如果准备制作弹跳动画，第一帧可以把圆球画在画布上方。

第 4 步：复制一帧，或者添加空白帧

如果下一张画和当前画面比较接近，直接复制当前帧最方便。复制后只擦掉并重画需要移动的部分。

• 点击哪里： 点击动画帧旁边的复制按钮。
• 你会看到： 第二张内容相同的帧缩略图。
• 接下来： 修改眼睛、手臂、圆球位置或其他需要运动的部分。

如果下一张画和当前帧差别很大，可以点击较大的加号，新建一张空白帧。

第 5 步：开启洋葱皮

“洋葱皮”会把上一帧以浅灰色显示在当前画面后面。它只是绘画参考，不会出现在最终导出的 GIF 中。

• 点击哪里： 点击幽灵形状的洋葱皮按钮。
• 你会看到： 上一帧以浅灰色显示在画布中。
• 接下来： 参考灰色位置，画出当前帧的新动作。

相邻两帧的变化越小，动作通常越平滑；位置变化越大，动作看起来就越快。

第 6 步：播放并检查动画

• 点击哪里： 点击三角形播放按钮。
• 你会看到： 所有动画帧按顺序播放，并自动循环。
• 接下来： 重点观察最后一帧回到第一帧时是否突然跳动。

如果循环结束时跳动明显，可以让最后一帧更接近第一帧，或者在中间再增加一帧。

第 7 步：让某一帧停留更久

WigglyPaint 暂时没有单独调整每一帧播放时间的功能。希望某张画停留更久时，可以多复制几次这一帧。

• 需要做什么： 选中想要延长的帧，再复制一到几次。
• 你会看到： 动画面板里出现两张或更多内容相同的缩略图。
• 接下来： 重新播放，检查停顿时间是否合适。

例如，眨眼动画可以把“睁眼”帧复制三次，而“闭眼”只保留一帧。角色会先保持睁眼，然后快速眨一下。

第 8 步：导出 GIF

• 点击哪里： 动画效果满意后，点击 Export。
• 你会看到： 保存或分享作品的选项。
• 接下来： 下载 GIF，或者分享到 WigglyPaint Community。

下载后再打开 GIF 检查一次，确认缩小后仍能看清动作，循环衔接也没有明显跳动。

完整示例：制作一个眨眼动画

眨眼很适合作为第一个逐帧动画，因为脸部大部分内容都不需要移动。

1. 第一帧画一张睁眼的脸。
2. 复制第一帧。
3. 在第二帧把眼睛改成半闭。
4. 再复制一帧，把眼睛改成完全闭合。
5. 把“半闭眼”帧复制到“闭眼”帧后面。
6. 点击播放，顺序应该是：睁眼—半闭—闭眼—半闭。
7. 如果眨眼太频繁，多复制几次睁眼帧。

同样的方法也可以制作花朵开放、星星闪动，或者角色轻轻呼吸的动画。

让动画更自然的简单方法

• 每次只改变一个主要部位。
• 不需要移动的部分尽量保持在原位。
• 画下一帧前先打开洋葱皮。
• 完成两三帧后就播放检查，不要等全部画完。
• 想让动作停顿，就复制相同的动画帧。
• 使用简单轮廓，缩小后仍要能看清主体。

遇到问题怎么办？

找不到 Animation 面板

先点击 Click to start drawing 进入完整画布，然后在编辑器底部找到 Animation 栏，点击后就能展开动画帧控制区。

动画播放得太快

选中希望停留更久的帧，再复制两到三次。重复帧会形成短暂停顿。

相邻两帧跳动太明显

打开洋葱皮，参考浅灰色的上一帧，把新位置移动得小一些。

循环到最后突然跳回去

比较最后一帧和第一帧，让两个画面更接近；也可以在它们之间增加一张过渡帧。

点击播放后看起来没有变化

先添加或复制第二帧，并修改第二帧中的一部分内容。至少需要两张不同的画面，才能看出动作。

WigglyPaint 当前支持哪些功能？

功能	当前是否支持
手动画出每一帧	支持
添加、复制和删除动画帧	支持
用浅灰色查看上一帧	支持
循环播放预览	支持
导出 GIF	支持
分享到 Community	支持
使用 AI 自动生成动画	不支持
把图片或视频自动转成动画	不支持
分别设置每一帧的时长	暂不支持，可以复制帧代替
调整 FPS	暂不支持
导出视频	暂不支持
在移动端 App 编辑动画帧	本教程介绍网页版本

逐帧动画常见问题

完全没有动画基础也能使用吗？

可以。第一次只需要画三到五帧，并且每帧只改变一个部位。眨眼、圆球弹跳和简单表情都很适合新手。

WigglyPaint 是免费的逐帧动画工具吗？

是的。WigglyPaint 可以直接在网页中免费绘画和制作短动画，不需要安装桌面软件。

是否需要下载动画制作软件？

不需要。绘画和逐帧动画制作都在浏览器里完成，结束后再把作品下载为 GIF。

洋葱皮有什么用？

洋葱皮会把上一帧显示成浅灰色参考图，帮助你保持角色大小和位置稳定，也能看清相邻两帧移动了多远。

WigglyPaint 会用 AI 自动生成动画吗？

不会。每一帧都由用户自己绘制。WigglyPaint 提供动态画笔、帧管理、洋葱皮、循环预览和 GIF 导出。

新手应该画多少帧？

先从三到五张不同的动画帧开始。这个数量已经足够完成眨眼、小幅弹跳和其他简单循环。

可以调整动画速度吗？

目前没有 FPS 或单帧时长设置。可以复制某一帧，让这一画面在循环中停留更久。

最后可以导出什么格式？

当前逐帧动画会导出为 GIF，不会导出为视频。

现在完成你的第一段动画

先画三帧，只改变一个小地方：画一张脸，复制它，修改眼睛，然后点击播放。成功看到眨眼效果后，再增加过渡帧或复制某一帧，慢慢调整节奏。