Animate CC 線條人物側面跑步動畫
閱讀時間約 1 分鐘
接著將介紹更為細膩的角色跑步動畫，細膩處即是手與腳都各分為二部分，因此無論是各元件的調整與設定都需要更仔細，否則將有元件中途分開的問題。
目標動畫效果:應用影片片段元件表現線條人物的的跑步，除了元件的準備與安排來表現動作之外，手與腳的部分均以二元件組成，所有元件將以傳統補間動畫讓動作更為流暢。
使用動畫技巧:影片片段元件、傳統補間動畫、變形中心。
使用動畫技巧:影片片段元件、傳統補間動畫、變形中心。
Step1.
範例檔元件庫中的動作元件包括頭、手、身體與腳均為獨立元件與獨立圖層所組成。
範例檔元件庫中的動作元件包括頭、手、身體與腳均為獨立元件與獨立圖層所組成。
進入動作元件內，使用自由變形工具來改變每個元件製作動畫時需要的變形中心點位置，頭於下巴處、二隻手及腳於與身體連接處。
Step2.
繼續在動作元件內於影格3與5為所有圖層插入關鍵影格，依序調整影格3與5上的線條人物動作，建立傳統補間完成跑步動作元件。
繼續在動作元件內於影格3與5為所有圖層插入關鍵影格，依序調整影格3與5上的線條人物動作，建立傳統補間完成跑步動作元件。
Step3.
回到場景上新增動作圖層並置入動作元件於右側場景外，點取動作元件並執行『修改 > 變形 > 水平翻轉』，同時並移動場景元件至左側場景外；
回到場景上新增動作圖層並置入動作元件於右側場景外，點取動作元件並執行『修改 > 變形 > 水平翻轉』，同時並移動場景元件至左側場景外；
二圖層於影格100處插入關鍵影格，移動人物動作元件至左側場景外、移動場景元件至右側場景，建立傳統補間動畫完成此範例。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
為什麼會看到廣告
29會員
161內容數
藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站，以及安裝和放置遊戲中的簡易流程。
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法，藉由連結程式腳本和動畫編輯器，讓動畫更靈活的運作。
這篇文章將會講述 Animation 在設定後要如何使用程式觸發，並不介紹直接使用的 Animation，並簡易提到 Animator 的連結教學。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站，以及安裝和放置遊戲中的簡易流程。
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法，藉由連結程式腳本和動畫編輯器，讓動畫更靈活的運作。
這篇文章將會講述 Animation 在設定後要如何使用程式觸發，並不介紹直接使用的 Animation，並簡易提到 Animator 的連結教學。