Android 版已上線:限時免費,馬上畫會動的像素畫
Android 版 →
iOS 版:在 iPad 上用 Apple Pencil 畫會抖的像素畫,一鍵匯出 GIF 與影片
iOS 版 →

動畫製作入門:5 個讓畫面動起來的基礎練習

粉紅背景上以抖動線條畫出的動態手繪角色

從擠壓拉伸、預備動作、時間間距、弧線與跟隨動作入門動畫製作,用簡單形狀完成可循環播放的 GIF 動畫。

第一次嘗試動畫製作,不用先準備完整角色、複雜分鏡或幾十張精修畫面。一個輪廓清楚的形狀,加上一個讀得懂的動作,就足以練習重量、節奏與方向。

WigglyPaint 不是傳統動畫軟體。它會讓畫下的線條自動抖動,完成第一筆就能看到動態;需要更長動作時可以加入影格,再匯出 GIF動畫。對想嘗試線上動畫製作的新手來說,可以先專注於動作,不必從複雜時間軸開始。

動畫製作前先縮小範圍

第一次動畫製作只需決定四件事:主體選圓球、色塊、花或小角色;動作只選彈跳、眨眼、搖擺、呼吸或揮手;色彩不超過三種;先決定循環動畫的開頭與結尾。

搜尋「如何製作動畫」時,很容易先比較工具。其實簡單動畫製作最需要的是明確動作與清楚剪影,而不是更多按鈕。

練習一:擠壓與拉伸

擠壓與拉伸是重要的動畫原理。圓球落地時變寬變矮,離地時變窄變高,同時維持大致相同的體積,觀眾才會感覺它有重量。

在 WigglyPaint 進行這次動畫製作時,使用粗輪廓和少量內部細節。自動抖動提供細微生命感,輪廓變化負責主要動作。這也是學習逐格動畫前很好的觀察練習。

練習二:主動作前加入預備

跳起前先蹲低,揮手前手臂先往後,花朵打開前先收攏。預備動作讓觀眾知道接下來會發生什麼。

用低矮色塊與向上伸展的色塊,完成一次動畫製作練習。沒有字幕也能讀出「準備跳起」,動作就成立。手繪動畫製作不必精緻,但姿勢關係要清楚。

練習三:時間與間距

時間決定動作持續多久,間距決定相鄰影格移動多遠。位置靠近看起來慢,距離突然拉大就像加速。

畫三個點完成這次動畫製作:前兩個靠近,第三個放遠。製作 GIF動畫時反覆預覽,若循環接縫跳動,就調整最後位置或刪除多餘影格。

練習四:弧線與跟隨動作

手臂擺動、球體彈跳和葉片飄落多半沿弧線前進。先畫淡淡的曲線,把關鍵姿勢放在線上,再移除輔助線。

跟隨動作是主體轉向後仍繼續移動的頭髮、圍巾、耳朵或尾巴。一次動畫製作先選一個部位即可;太多次要動作會讓小尺寸作品變得混亂。

練習五:次要動作與乾淨循環

植物搖擺時讓一片葉子稍晚跟上,角色眨眼時讓高光微微下沉。次要動作應支援主題,不要搶走注意力。用「靜止—動作—回落—靜止」組成循環動畫。

完成動畫製作後縮小到貼圖尺寸觀看。若仍能看懂動作,層級就是對的;如果只看到一團閃動線條,就減少裝飾。

動畫製作匯出檢查

匯出前確認:主要動作能否用一個動詞說明、縮小後剪影是否清楚、是否有準備與結束、最後一格能否連回第一格,以及刪掉一個細節會不會更清楚。

動畫教學的目的不是讓第一件作品達到商業規格,而是幫助你完成、判斷並重複練習。動畫製作可以保留手感,動作邏輯則必須明確。

下一步

連續做彈跳圓點、眨眼小臉與搖擺植物,每次動畫製作練習控制在十分鐘。保留最清楚的一版,再更換筆刷或速度比較。

準備好後,打開 WigglyPaint 開始動畫製作:先畫一個簡單形狀,讓動畫筆刷加入手繪抖動,需要時再增加影格,最後匯出 GIF。

做出第一張會動的圖

只選一個形狀和一個動作,讓 WigglyPaint 處理線條的抖動。

免費開始畫畫