Animate CC 花飄落水中動畫

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

若要表現花飄落的效果，除了落下的軌跡外，最重要的是花在落下的同時是伴隨著細微的旋轉，最後再以導引線控制飄落軌跡與搭配落入水中時的水紋，即可完成！

目標動畫效果:搭配影片片段元件與導引線的使用，加上水紋與移動的安排，來完成花落入水中的各個細節。
使用動畫技巧:影片片段元件、傳統補間動畫、移動補間動畫、導引線。

Step1.
範例檔元件庫中包含花朵與白圈二元件。新增影片片段元件『花朵旋轉』，置入花朵元件於中心並建立移動補間動畫，分別於影格10、20、30插入關鍵影格（全部），於影格20與30上使用『變形工具』略微旋轉花朵元件。

Step2.
回到場景上，新增花朵旋轉圖層並置入花朵旋轉元件於右上角樹枝上，於影格90插入關鍵影格移動花朵至水面上並建立傳統補間動畫，背景圖層於影格90插入影格。

新增花朵旋轉圖層的導引線圖層，使用鉛筆工具繪製花朵落下的軌跡，移動前後關鍵影格上的花朵元件使其中心點吸附導引線，完成花朵的導引線動畫。

Step3.
新增水面花朵圖層，於影格90處插入關鍵影格並置入『花朵』元件使其對齊花朵旋轉元件的位置，移動關鍵影格90至91處，再於影格120處插入關鍵影格，背景圖層於影格130處插入影格。向下移動影格130上的花朵並設定 Alpha:0，建立傳統補間動畫，設定訂加減速：100；

在影格100處於水面花朵圖層上插入關鍵影格，使用變形工具向左轉正花朵，完成花朵沈入水中。

Step4.
新增影片片段元件『水紋』，置入白圈元件並於影格5、20插入關鍵影格，設定影格1上的白圈Alpha:0、放大影格20上的白圈並設定Alpha:0，建立傳統補間動畫，設定影格5-20間加減速：100。向上新增四個圖層，反選圖層1上所有影格並移動複製至上方圖層上（按住Alt），成5個影格時間差的安排。

Step5.
回到場景上，新增水紋圖層於水面花朵圖層之下，並於影格91處插入關鍵影格，置入水紋元件於水面花朵下方，壓扁變形並設定Alpha:30％，完成此範例效果。

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