Animate CC 可愛動物跑步動畫

【檢視範例】【下載範例】

對於較細膩的動物跑步動作，若是要以傳統補間完成的話，就元件繪製時就需要考慮到元件上顏色的銜接問題，否則將出現腳元件與身體的不連續問題，另外動作上的設定也需要更細膩些，在此將以小狗跑步來解說。

目標動畫效果:應用影片片段元件表現可愛動物四隻腳的跑步，除了元件的準備與安排表現動作之外，將以傳統補間動畫讓動作更為流暢。 使用動畫技巧:影片片段元件、傳統補間動畫、變形中心。

Step1. 範例檔元件庫中的小狗元件，除了頭之外其餘四隻腳與尾巴，在繪製時就已經在與身體連接面留下框線的缺口，讓填色與身體元件自然接合，就不會因為不同姿勢安排而破壞角色完整性。

首先進入到小狗動作元件內，元件內的三條水平導引參考線將是動作設定時的參考，請依序修正每個元件的變形中心位置，腳與尾巴均是在與身體銜接處，頭的中心點請更正為與脖子銜接處。

Step2. 於影格1、5、9、13、15、20插入關鍵影格，準備來設定小狗跑步時需要的動作：

Step3. 建立傳統補間動畫，完成小狗跑步動作。最後回到場景上新增小狗圖層於欄杆圖層之下，置入小狗動作元件於右側場景之外，於影格120處插入關鍵影格，移動小狗元件至左側場景之外並建立傳統補間動畫，欄杆與背景圖層於影格120處插入影格，完成此範例。

相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果