極簡像素畫角色跑步動畫教程：四幀循環跑步

極簡像素畫角色跑步動畫教程：四幀循環跑步

前言

大家好，今天分享一篇像素畫跑步動畫教程。教程靈感來自 @angrysnail 的跑步小人，用很少的像素就能做出有辨識度的跑步循環，還能通過發型、背包、服裝等小改動做出不同角色。

我會用 Aseprite 演示，如果你用免費工具，可以用 Pixilart 等替代。

下面按步驟從靜幀小人做到四幀跑步循環，并加上陰影和揚塵效果。

第一步：畫第一個小人

先用膚色畫一個 5×5 像素的頭部方塊，我用的是 #eec39a，背景用藍色 #639bff 方便觀察。

在底部中間加 3 個像素作為脖子，并擦掉左上角一格。

加上眼睛和頭發，我用了綠色 #872222 和深紅 #ac3232，你可以按自己喜好改顏色。

在脖子下畫 5×4 的身體（我用 #872287），下面一行藍色 #225487 當短褲，再畫一行作為左腿。

選一個稍深的膚色做四肢和脖子下方的下巴陰影，例如從 #eec39a 的 Shades 里選 #e7a96e。

加上鞋子?，F在看起來可能有點怪，動起來就會自然很多。

第二步：復制并改出第二個角色

復制第一個小人，然后改發型、眼睛、上衣顏色和體型：比如金發、更多頭發、深藍眼睛、綠色上衣，縮短軀干、抬高手臂、加長一條腿，這樣兩個角色就有區分度。

第三步：做四幀跑步循環

新建一幀，幀就是動畫里的每一格。

跑步或走路循環里，腿從伸展→收回→抬起→再向前伸展，如此循環。

第一幀：身體和頭下移一格，擦掉原來的腿但保留腳，整體矮 1 像素，形成上下起伏；手臂伸直向下，前腿收回 1 像素。

第二個角色同理，腿可以縮短而不是完全擦掉。

再新建一幀。手臂擺到后面，另一側手臂出現；一條腿在身后只露出鞋，另一條腿帶著短褲和鞋在前。身體高度恢復，形成起伏。

第四幀和第二幀類似，但腿左右相反：又是“壓低”的一幀，手臂伸直，腿的位置對調。

這樣四幀跑循環就完成了。

導出時選 GIF 并設為無限循環。

可以加一層共享圖層畫地面陰影（所有幀共用），再單獨一層畫揚塵，從后腳蹬地處飛出。

用取色器或色板（如 w3schools 的 color picker）選比背景藍深一兩檔的顏色畫陰影和揚塵，再給衣服、頭發加一點暗部。

如果上衣陰影太重，可以只加深一檔而不是兩檔。

導出后如果覺得在 GIF 里陰影比在 Aseprite 里更明顯，可以回軟件里微調。

下面是 1:1 尺寸的動畫和精靈表，方便你對照幀與圖層。

結語

這篇教程把“靜幀小人 → 雙角色 → 四幀跑步 → 陰影與揚塵”串起來做了一遍，用的都是基礎操作。

你可以在同一套循環上換顏色、換發型和服裝，快速做出一組跑步角色。

如果你按這個流程做了自己的跑步動畫，歡迎在評論區分享～