Animate CC 可愛動物跑步動畫
閱讀時間約 1 分鐘
對於較細膩的動物跑步動作，若是要以傳統補間完成的話，就元件繪製時就需要考慮到元件上顏色的銜接問題，否則將出現腳元件與身體的不連續問題，另外動作上的設定也需要更細膩些，在此將以小狗跑步來解說。
目標動畫效果:應用影片片段元件表現可愛動物四隻腳的跑步，除了元件的準備與安排表現動作之外，將以傳統補間動畫讓動作更為流暢。
使用動畫技巧:影片片段元件、傳統補間動畫、變形中心。
使用動畫技巧:影片片段元件、傳統補間動畫、變形中心。
Step1.
範例檔元件庫中的小狗元件，除了頭之外其餘四隻腳與尾巴，在繪製時就已經在與身體連接面留下框線的缺口，讓填色與身體元件自然接合，就不會因為不同姿勢安排而破壞角色完整性。
範例檔元件庫中的小狗元件，除了頭之外其餘四隻腳與尾巴，在繪製時就已經在與身體連接面留下框線的缺口，讓填色與身體元件自然接合，就不會因為不同姿勢安排而破壞角色完整性。
首先進入到小狗動作元件內，元件內的三條水平導引參考線將是動作設定時的參考，請依序修正每個元件的變形中心位置，腳與尾巴均是在與身體銜接處，頭的中心點請更正為與脖子銜接處。
Step2.
於影格1、5、9、13、15、20插入關鍵影格，準備來設定小狗跑步時需要的動作：
於影格1、5、9、13、15、20插入關鍵影格，準備來設定小狗跑步時需要的動作：
Step3.
建立傳統補間動畫，完成小狗跑步動作。最後回到場景上新增小狗圖層於欄杆圖層之下，置入小狗動作元件於右側場景之外，於影格120處插入關鍵影格，移動小狗元件至左側場景之外並建立傳統補間動畫，欄杆與背景圖層於影格120處插入影格，完成此範例。
建立傳統補間動畫，完成小狗跑步動作。最後回到場景上新增小狗圖層於欄杆圖層之下，置入小狗動作元件於右側場景之外，於影格120處插入關鍵影格，移動小狗元件至左側場景之外並建立傳統補間動畫，欄杆與背景圖層於影格120處插入影格，完成此範例。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
為什麼會看到廣告
29會員
161內容數
藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!
留言0
查看全部
哩老師的沙龍 的其他內容
你可能也想看
Unity Component | Animator Play and Transition這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
2023-01-09
Unity Animation | 3D Character and Animation這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站，以及安裝和放置遊戲中的簡易流程。
2022-09-26
Unity Animation | 高階程式參數控制這篇文章將會介紹 Unity Animatior Edit 參數控制的方法，藉由連結程式腳本和動畫編輯器，讓動畫更靈活的運作。
2022-09-09
Unity Animation | 簡易程式控制這篇文章將會講述 Animation 在設定後要如何使用程式觸發，並不介紹直接使用的 Animation，並簡易提到 Animator 的連結教學。
2022-09-07