Animate CC Q版騎腳踏車動畫

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

在交通工具中，就屬腳踏車動畫的細節最多，因為除了輪子的轉動外，人物角色二隻腳來踩動腳踏車踏板是最需要注意動畫細節的，其中包括雙腳的動作與踏板的旋轉，雙腳動作需注意變形中心與補間動畫的應用，踏板的旋轉即是要依靠導引線來控制繞圈旋轉，最後搭配場景上場景元件的移動，即可完成騎腳踏車動畫。

目標動畫效果:應用影片片段元件與傳統補間動畫，控制變形中心點位置來表現腳的動作，再搭配導引線控制腳踏車踏板的旋轉，來表現腳踩動腳踏車的動畫細節。
使用動畫技巧:影片片段元件、傳統補間動畫、導引線、變形中心。

Step1.
範例檔場景上是一份尺寸較大的森林場景元件，參考線範圍內即是實際場景尺寸，元件庫中包含了角色人物與腳踏車元件，人物部分雙腳是需要分開個別元件的。

首先進入騎腳踏車元件內，每個要設定動畫的元件均已分圖層與轉換成元件，點取前輪轉換成影片片段元件『前輪旋轉』、點取後輪轉換成影片片段元件『後輪旋轉』。分別進入前輪旋轉與後輪旋轉元件內，於影格24插入關鍵影格並建立傳統補間動畫、設定逆時針選轉1圈。

Step2.
再次進到騎腳踏車元件內，為所有圖層於影格24處插入關鍵影格，暫時隱藏人物相關元件圖層，於踏板圖層的影格24插入關鍵影格並建立傳統補間動畫，在導引線圖層上按下滑鼠右鍵選擇執行『導引線』，啟動缺口圓形導引線功能並鎖定導引線圖層，移動踏板圖層至導引線圖層下緣使其感應並作用導引線，移動影格1上的踏板元件至導引線缺口下方起點處，移動影格24上的踏板至導引線缺口的上方終點處，完成導引線控制旋轉的踏板。

Step3.
繼續在騎腳踏車元件內，顯示所有圖層並依序更改雙腳四元件的變形中心，下半腳變形中心點於膝蓋上、上半腳中心點魚與身體接合處。

於四個腳元件圖層的6、12、18、24插入關鍵影格，開始來配合踏板位置設定腳的動作，請使用旋轉與移動來安排影格1、6、12、18上腳元件的正確位置（如圖所示，注意前後腳的相對位置），並複製影格1至影格24，建立四圖層傳統補間動畫，完成腳踩踏板的動畫。

Step4.
繼續在騎腳踏車元件內，更改右手元件變形中心於手肘處、頭元件於下巴處，於影格4、8、12插入關鍵影格，旋轉影格4與8上的右手與頭元件，建立影格1-12間傳統補間動畫。

回到場景上，新增騎腳踏車圖層於一棵樹圖層之下，置入騎腳踏車元件於右側場景外，為三個圖層於影格240處插入影格。

Step5.
在騎腳踏車圖層上，於影格30、60、120、180、240插入關鍵影格，依序設定元件位置並建立傳統補間動畫。

繼續為森林圖層於影格240插入關鍵影格，向右移動森林元件至元件左側於場景左側外，最後為一棵樹圖層於影格120、240處插入關鍵影格，移動120上的一棵樹至場景中央、移動影格240上的一棵樹至場景右側外，均建立傳統補間動畫完成此範例。

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