Animate CC Q版動物走路動畫
閱讀時間約 1 分鐘
可愛版的動物走路，最大特色是在於腳的部分將省略因走路而彎曲的動作，而是以短比例的腳來表現可愛風格，所以仍然需要注意走路時腳元件的調整。
目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路，除了元件的準備與安排來表現動作之外，將以傳統補間動畫讓動作更為流暢。
使用動畫技巧:影片片段元件、傳統補間動畫、變形中心。
使用動畫技巧:影片片段元件、傳統補間動畫、變形中心。
Step1.
範例檔元件庫中的馬元件，除了頭之外其餘四隻腳與尾巴，同樣在繪製時就已經在與身體連接面留下框線的缺口，讓填色與身體元件自然接合，就不會因為不同姿勢安排而破壞角色完整性，而為了表現可愛版的走路，因此馬腳並不包含彎曲動作。
範例檔元件庫中的馬元件，除了頭之外其餘四隻腳與尾巴，同樣在繪製時就已經在與身體連接面留下框線的缺口，讓填色與身體元件自然接合，就不會因為不同姿勢安排而破壞角色完整性，而為了表現可愛版的走路，因此馬腳並不包含彎曲動作。
首先進入到馬動作元件內，元件內的二條水平導引參考線將是動作設定時的參考，請依序修正每個元件的變形中心位置，腳與尾巴均是在與身體銜接處，頭的中心點請更正為與脖子銜接處。
Step2.
於影格7、13、19、23插入關鍵影格，準備來設定馬跑步時需要的動作：
於影格7、13、19、23插入關鍵影格，準備來設定馬跑步時需要的動作：
Step3.
建立傳統補間動畫，完成馬可愛版走路動作。最後回到場景上新增馬圖層於前景圖層之下，置入馬動作元件於右側場景之外，於影格240處插入關鍵影格，移動馬元件至左側場景之外並縮小，建立傳統補間動畫，前景與背景圖層於影格240處插入影格，完成此範例。
建立傳統補間動畫，完成馬可愛版走路動作。最後回到場景上新增馬圖層於前景圖層之下，置入馬動作元件於右側場景之外，於影格240處插入關鍵影格，移動馬元件至左側場景之外並縮小，建立傳統補間動畫，前景與背景圖層於影格240處插入影格，完成此範例。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
為什麼會看到廣告
29會員
161內容數
藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!
留言0
查看全部
你可能也想看
Google News 追蹤
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議
分析兩位候選人政策利多/ 利空的板塊和股票
🤔為什麼團長的能力是死亡筆記本?
🤔為什麼像是死亡筆記本呢？
🤨作者巧思-讓妮翁死亡合理的幾個伏筆
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站，以及安裝和放置遊戲中的簡易流程。
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法，藉由連結程式腳本和動畫編輯器，讓動畫更靈活的運作。
這篇文章將會講述 Animation 在設定後要如何使用程式觸發，並不介紹直接使用的 Animation，並簡易提到 Animator 的連結教學。
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議
分析兩位候選人政策利多/ 利空的板塊和股票
🤔為什麼團長的能力是死亡筆記本?
🤔為什麼像是死亡筆記本呢？
🤨作者巧思-讓妮翁死亡合理的幾個伏筆
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站，以及安裝和放置遊戲中的簡易流程。
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法，藉由連結程式腳本和動畫編輯器，讓動畫更靈活的運作。
這篇文章將會講述 Animation 在設定後要如何使用程式觸發，並不介紹直接使用的 Animation，並簡易提到 Animator 的連結教學。