Animate CC 大自然水滴滴落動畫

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

在大自然的場景下，除了昆蟲與樹葉的動態表現外，樹葉上的露水滴落往往成為動畫的焦點，因此水滴滴落時的動態表現，不同於雨滴，需要更細膩的表現出來。

目標動畫效果:利用影片片段元件與導引線動畫，表現大自然之中的元素動態，包括昆蟲飛舞、葉子晃動、葉上水滴滴落等。
使用動畫技巧:影片片段元件、傳統補間動畫、導引線動畫。

Step1.
範例檔元件庫中的水滴（漸層填色繪製，包含半透明的填色）葉子與小瓢蟲是所需要的簡單素材。首先點取右側的小葉子並轉換為影片片段元件『葉子晃動』，進入葉子晃動元件內，點取葉子再轉換為葉子影片片段元件。

Step2.
繼續在葉子晃動元件內，使用變形工具改變形中心至葉子梗的尾端處，並在影格30、60、90插入關鍵影格，設定影格30葉子向左下稍微旋轉、影格60葉子向右上稍微旋轉，建立傳統補間動畫，完成葉子晃動元件。

回到場景上，原來的葉子影已經是包含晃動的動作，請直接再複製小葉子並搭配翻轉、旋轉與縮放，另外再安排場景上其他處的小葉子。

Step3.
進到瓢蟲飛元件內，依序個別點取二翅膀與身體轉換為影片片段元件，並分散至圖層（整理圖層順序，刪去空的圖層1），使用變形工具更改二翅膀的變形中心至與身體連接處，二翅膀圖層於影格3與5插入關鍵影格、身體圖層於影格5插入影格，調整影格3上的翅膀成向後收起狀，建立二翅膀圖層傳統補間動畫，完成瓢蟲飛元件。

Step4.
回到場景上，新增瓢蟲飛圖層並置入瓢蟲飛元件（略縮小瓢蟲飛元件），在瓢蟲飛圖層於影格90插入關鍵影格並建立傳統補間動畫，點取瓢蟲飛圖層並增加移動導引線圖層，使用鉛筆工具繪製瓢蟲飛路徑，路徑請通過右下角花朵中心處，移動影格1與90上的瓢蟲飛元件使其中心吸附於導引線之上，完成瓢蟲飛導引線動畫。

Step5.
再新增瓢蟲圖層於最上方，於影格90插入關鍵影格並置入瓢蟲元件，位置請對齊瓢蟲飛元件的位置，除了瓢蟲飛與導引線圖層外，其他圖層請至影格180處插入影格；移動瓢蟲圖層上的關鍵影格90至影格100、瓢蟲飛圖層至影格99插入關鍵影格插入影格，完成飄蟲停在花上的動作安排。

Step6.
點取場景上的大葉子並轉換為影片片段元件『葉子與水滴』，進入葉子與水滴元件內，使用變形工具改葉子中心至梗的末端；新增水滴圖層並置入水滴元件於葉子中央，請旋轉水滴元件成橫向，水滴圖層於影格8、40插入關鍵影格，大葉子圖層請於影格8、46、50、60、70、80插入關鍵影格、120插入影格。

Step7.
縮小影格1上的水滴至最小且設定Alpha:0、移動影格40上的水滴至葉子尾端，繼續再於水滴圖層的影格46插入關鍵影格並移動水滴至葉子尖端處，變形旋轉水滴成直向並略拉長，最後於水滴圖層的影格50插入關鍵影格並移動水滴至下方，建立傳統補間動畫。接著設定如下的葉子狀態，並建立影格8-80間的傳統補間動畫。

Step8.
新增光點圖層於最上方並於影格20插入關鍵影格，置入光點元件並略微縮小尺寸，於影格25、40、45、50插入關鍵影格，依序設定光點屬性：

最後建立光點圖層上20-50間傳統補間動畫，移除影格50之後的多餘影格完成此範例。

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