逐格動畫教學：一步步教你製作手繪動畫

在 WigglyPaint 裡，只要畫幾張稱為「影格」（frames）的圖片，就能輕鬆製作手繪動畫。每一格的圖案只要有一點點不一樣，當 WigglyPaint 照順序播放時，你畫的圖案看起來就像動起來了一樣！

這裡的每一格都是由你親手畫出來的。WigglyPaint 不會用 AI 生成動畫，不能把照片自動轉成動畫，也沒辦法做成影片。這篇教學會帶你從畫下第一筆開始，一步步完成並匯出專屬的 GIF 動畫。

什麼是逐格動畫？

簡單來說，一個「影格」就是一張畫。逐格動畫就是利用好幾張稍微不同的畫，連續播放來產生動作的感覺。

舉例來說，第一格畫一雙張開的眼睛，下一格畫閉上的眼睛。當這兩格連續播放時，看起來就像在眨眼。

WigglyPaint 透過兩種方式讓圖案動起來：

1. 畫筆的線條本身就會自然抖動。
2. 影格面板會照順序播放你畫的每一張圖。

你可以利用影格面板讓角色揮手、讓花朵開花、讓球彈跳，或是改變臉部表情。

我可以在 WigglyPaint 製作什麼？

WigglyPaint 是一個免費的逐格動畫網站，打開瀏覽器就能直接用，完全不用安裝任何軟體。

在這裡，你可以做到以下幾件事：

• 新增空白影格
• 複製影格
• 刪除影格
• 把上一格變成淺灰色的參考線（這叫作「洋蔥皮透視」）
• 把所有影格變成不斷重複的循環動畫
• 把動畫匯出成 GIF
• 把做好的 GIF 分享到 WigglyPaint 社群

這個工具很適合用來做短短的手繪動畫、貼圖、表情包、小角色或簡單的動作測試。不過，它不適合用來做長篇電影，或是需要複雜剪輯的大型專案喔。

開始之前的準備

• 建議用電腦看這篇教學並跟著操作。螢幕大一點，按鈕和工具會看得比較清楚。
• 先從簡單的東西和動作開始，例如一張眨眼的臉或一顆彈跳的球。
• 用兩三種顏色就好。圖案越簡單，做動畫越輕鬆。
• 不用畫得太完美，動作清楚比線條漂亮更重要。

如何製作動畫：8 個簡單步驟

1. 開始畫新圖

• 點擊： 打開 WigglyPaint，點一下 Click to start drawing（點擊開始畫圖）。
• 你會看到： 完整的畫布和各種畫圖工具。
• 下一步： 選一個喜歡的畫筆和顏色。

先畫一個大又簡單的東西。一張臉、一顆星星、一朵花或一顆球，都是很好的入門選擇。

2. 打開 Animation（動畫）面板

• 點擊： 點一下畫面底部的 Animation（動畫）橫條。
• 你會看到： 一排小小的影格圖片、一個播放按鈕、一個洋蔥皮按鈕，還有一個大大的加號按鈕。
• 下一步： 確認現在選的是第一格。

有外框標示的影格，就是你現在正在畫的那一格。想畫別格時，只要點一下那張小圖片就好。

3. 畫出第一格

• 動作： 畫出物品或角色的第一個動作。
• 你會看到： 你的圖同時出現在大畫布和第一張小影格裡。
• 下一步： 先把主要形狀畫好，準備新增下一格。

如果是眨眼的臉，請畫一張眼睛張開的臉。如果是彈跳的球，可以先把球畫在畫布上方。

4. 複製影格或新增空白影格

如果下一張圖差不多，可以直接複製現在這一格。然後用橡皮擦擦掉要動的地方，重新畫上新動作就好。

• 點擊： 點一下小影格旁邊的複製按鈕。
• 你會看到： 出現第二格，圖案跟第一格一模一樣。
• 下一步： 改掉圖案的一小部分，例如眼睛、手或球的位置。

如果你需要一張完全空白的畫布，請點大大的 加號 按鈕。如果下一張圖變化很大，直接新增空白影格會比較快。

5. 開啟洋蔥皮透視

「洋蔥皮透視」（Onion skin）會用淺灰色顯示上一格的圖案，幫你看出上一張圖畫在哪裡。不用擔心，這個灰色的參考線不會出現在最後的 GIF 動畫裡。

• 點擊： 點一下幽靈形狀的洋蔥皮按鈕。
• 你會看到： 畫布上出現了上一張圖的淺灰色影子。
• 下一步： 參考灰色影子畫出新的位置，這樣動作接起來會比較順。

如果兩格之間的變化很小，動作看起來會比較平順。如果想讓動作看起來很快，兩張圖的變化就可以大一點。

6. 播放動畫

• 點擊： 點一下三角形的 Play（播放）按鈕。
• 你會看到： 影格照順序播放，而且會不斷重複循環。
• 下一步： 看看從最後一格接回第一格時，動作順不順。

如果動畫看起來卡卡的或跳來跳去，請比較一下最後一張和第一張圖。你可以把最後一張畫得跟第一張像一點，或者在中間再加一格。

7. 讓某個畫面停留久一點

WigglyPaint 目前還不能單獨設定每一格的速度。如果你想讓某個畫面停留久一點，只要多複製幾次那一格就可以了。

• 動作： 選好你想停留的影格，然後複製一次或好幾次。
• 你會看到： 出現好幾個圖案一模一樣的影格。
• 下一步： 點擊 Play（播放），看看停頓的時間夠不夠長。

舉例來說，把「張開眼睛」複製兩三次，「閉上眼睛」只留一格。這樣一來，這張臉就會一直張著眼睛，然後快速眨一下。

這是控制節奏最簡單的方法，完全不用學 FPS（每秒影格數）或其他複雜的設定。

8. 匯出你的手繪動畫

• 點擊： 確認動畫沒問題後，點擊 Export（匯出）。
• 你會看到： 儲存或分享作品的選項。
• 下一步： 把動畫匯出成 GIF，或分享到 WigglyPaint 社群。

打開存好的 GIF 檢查一下。確認圖案清楚，而且循環播放時沒有奇怪的跳動。

逐格動畫範例：畫一個眨眼的臉

畫眨眼是很棒的入門練習，因為大部分的圖案都不用動。

1. 畫一張眼睛張開的臉。
2. 複製這一格。
3. 在新的一格裡，把眼睛擦掉一半，畫成半閉的樣子。
4. 複製半閉眼這一格，然後把眼睛畫成完全閉上。
5. 再複製一次半閉眼的影格，把它拉到完全閉眼的影格後面。
6. 點擊 Play（播放）。影格的順序應該是：張開 ➔ 半閉 ➔ 閉上 ➔ 半閉。
7. 如果眨眼眨得太快，可以多複製幾個「張開眼睛」的影格。

你可以用同樣的方法來畫開花、閃爍的星星，或是正在深呼吸的小角色。

讓動畫更順暢的簡單小技巧

• 每次只改變一個主要的地方。
• 不會動的地方，盡量畫在同一個位置。
• 畫下一格之前，先打開洋蔥皮透視當參考。
• 畫了兩三格就點播放看看，不要等全部畫完才檢查。
• 想讓動作暫停一下時，就多複製幾次那一格。
• 用簡單的形狀畫，這樣就算圖案縮小也看得很清楚。

如果動畫看起來怪怪的怎麼辦？

我找不到 Animation（動畫）面板

請先點擊 Click to start drawing（點擊開始畫圖）。然後在畫面底部找到 Animation 橫條，點一下就能打開影格面板。

動畫跑得太快了

把你希望停留久一點的影格多複製幾次。連續放兩三個一樣的影格，就能製造出停頓的感覺。

影格之間的圖案移動距離太遠

打開洋蔥皮透視。把上一張圖的灰色影子當作參考，讓新畫的圖案不要跑太遠。

循環播放到最後會突然跳格

比較一下最後一格和第一格。把這兩張圖畫得像一點，或者在中間再加一格來過渡。

按下播放時，我只看到一張圖

請新增或複製一格，然後改掉新影格裡的一部分圖案。動畫至少要有兩張不一樣的圖，看起來才會動喔。

WigglyPaint 目前支援的功能

功能	目前有支援嗎？
親手畫出每一格	是
新增、複製與刪除影格	是
把上一格變成灰色參考線	是
播放不斷重複的循環動畫	是
匯出 GIF	是
分享到社群	是
用 AI 生成動畫	否
把照片或影片自動轉成動畫	否
單獨設定每一格的停留時間	還不行；請用複製影格來代替
更改 FPS（每秒影格數）	還不行
匯出影片檔	還不行
在手機 App 裡編輯影格	本教學只適用於網頁版

逐格動畫常見問題

怎麼製作動畫？

畫出第一張圖，複製或新增一格，然後改掉新圖案的一部分。需要的話可以加更多格。點擊播放檢查動作，最後把循環動畫匯出成 GIF。

WigglyPaint 是一個免費的逐格動畫 App 嗎？

WigglyPaint 是一個在瀏覽器上執行的免費畫圖與動畫工具。不用安裝任何軟體，就能輕鬆製作簡短的逐格動畫。

我需要下載逐格動畫軟體嗎？

不用喔！你可以直接在 WigglyPaint 網站上畫圖做動畫。做完後，再把動畫下載成 GIF 檔案就好。

做動畫時有參考線可以用嗎？

有的。打開「洋蔥皮透視」功能，就會用淺灰色顯示上一格的圖案。畫下一格時，就可以把這個灰色影子當作參考。

WigglyPaint 會用 AI 做動畫嗎？

不會。每一格都是由你親手畫出來的。WigglyPaint 提供的是自然抖動的畫筆、影格面板、洋蔥皮透視、循環預覽和 GIF 匯出功能。

初學者一開始要畫幾格比較好？

一開始先試著畫 3 到 5 格就好。這樣已經足夠做一個眨眼、小彈跳或其他簡單的循環動畫了。

我可以改變動畫的速度嗎？

目前還沒有 FPS 或單獨調整某一格時間的功能。不過你可以多複製幾次同一格，讓那個畫面停留久一點。

動畫會一直重複播放嗎？

會的。預覽時會不斷重複播放，這樣你就能檢查從最後一格接回第一格時順不順。

我可以匯出什麼檔案格式？

WigglyPaint 會把手繪動畫匯出成 GIF。目前的網頁版還不支援匯出影片檔喔。

製作你的第一個手繪動畫

先從 3 個影格和一個小小的變化開始吧！畫一張臉，複製它，改變眼睛的形狀，然後點擊播放。成功之後，你可以再多加幾格，或是用複製影格來調整節奏。