這篇 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 格式儲存，再用瀏覽器或會播放動圖的 App 開啟。確認縮小後仍看得清楚，而且循環沒有突然跳動。
完成的動圖會是這樣
這是依照上面步驟實際匯出的 GIF。主體大、顏色少，而且每格只改位置與表情，因此放在 LINE、訊息或社群貼文中也容易看懂。
讓 GIF 更適合分享
- 減少主體周圍的空白。
- 每格只改一個主要動作。
- 先畫大形狀，少放細節。
- 複製影格可做出短暫停頓。
- 一定要檢查最後一格回到第一格。
- 發布前先開啟下載檔。
加細節前先知道 GIF 的限制
GIF 沒有聲音，而且每個影格最多使用 256 色。少量平塗顏色、清楚輪廓與短循環，通常比漸層、照片質感或長片段更清楚，檔案也較小。
常見問題
- 播放太快： 複製需要停久一點的影格。
- 循環突然跳動： 讓最後與第一格更接近，或補一個過渡姿勢。
- 主體大小一直變： 開啟洋蔥皮，先對齊不動的部分。
- 匯出後只有一張圖： 確認每個縮圖都有內容，並在完成所有影格後再匯出。
- 檔案太大或模糊： 減少影格、顏色和多餘空白。
- 下載後看起來不會動： 改用瀏覽器或支援 GIF 的 App；部分相簿只顯示第一格。
完成後可以怎麼用
短循環很適合做 LINE 反應圖、聊天貼圖、社群貼文或課堂示例。GIF 沒有聲音，所以動作本身要清楚。想先了解每個按鈕，可讀逐格手繪動畫入門；想找更多工具靈感，可看新手動畫網站整理。
常見問答
可以免費做 GIF 動畫嗎？
可以，網頁版能直接畫影格並匯出 GIF，不必安裝桌面軟體。
能把現有照片或影片自動轉成動畫嗎？
不能，這是親手逐格畫的流程，不是圖片或影片轉換工具。
新手需要幾個影格？
先做三到四格，需要更順時再加過渡格。
能調整單一影格的速度嗎？
目前沒有單格時間設定，可複製同一格讓姿勢停留更久。
如何讓循環銜接自然？
比較最後一格與第一格，讓主體位置相近；若仍跳動，就增加一個帶回起點的過渡影格。
GIF 動畫可以有聲音嗎？
GIF 格式不包含音訊，動作本身需要在靜音時也能被理解。
這個網頁流程能匯出影片嗎？
本教學對應網頁版的 GIF 匯出，不代表同一套影格流程可以直接匯出影片。