【Animate CC與javaScript互動】Animate CC 雨滴滴落倒影波動動畫

作者：李啟宏 恆逸教育訓練中心資深講師  

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

動畫裡最常需要的自然現象即是下雨，為了讓雨滴更寫實，因此使用雨滴元件而非一般的線段，搭配水面水紋漣漪與倒影的波動，來讓整個下雨場景更逼真！ 目標動畫效果:利用影片片段元件安排大量的雨滴落下，加上以圓圈製作的水紋漣漪，以及以形狀補間動畫內容的遮色片表現倒影波動，完成逼真的雨中場景。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片。

Step1. 範例檔元件庫中的雨滴（漸層填色繪製）與圓圈是所需要的簡單素材。新增『漣漪』影片片段元件，拉入圓圈圖像元件，在影格20處插入關鍵影格，縮小影格1的圓圈、放大影格20的圓圈並設定Alpha=0，加上傳統補間動畫、加/減速：100。將完成的圈放大動畫影格，複製至第二個圖層的影格5開始，成二個圈放大的動畫。

Step2. 新增『雨滴動畫』影片片段，拉入雨滴元件縮小並旋轉變形成斜落狀，於影格15處插入關鍵影格，並移動雨滴至左下，建立傳統補間動畫。於影格16處插入空白關鍵影格，拉入漣漪圖像元件，於影格39處插入影格，使用描圖紙功能方便檢視並編輯雨滴與漣漪間的正確位置，壓扁漣漪成扁長形，且位置為雨滴著地處。

Step3. 新增『雨滴群』影片片段，拉入雨滴動畫元件並於影格39處插入影格，複製單個雨滴動畫全部影格至多個圖層上，並調整每個圖層上的動畫起始時間，使用『編輯多個影格』功能，設定每個雨滴動畫的不同位置、尺寸、alpha等。

Step4. 回到場景上，拉入雨滴群元件，安排多個雨滴群元件至多個圖層上，並調整每個圖層上的動畫起始時間與每個雨滴群的不同位置、尺寸、alpha等。為所有圖層於影格100處插入影格，依序反選並移動各雨滴群影格成依序出現，倒影與背景圖層於雨滴群圖層的最後一個影格處插入影格。

Step5. 新增倒影放大圖層於倒影圖層之上，複製並原地貼上倒影內容，鎖定倒影圖層，確定選取倒影放大圖層上的倒影元件，按住Shift原地微放大倒影。新增倒影遮色片圖層於倒影放大圖層之上，使用橢圓工具繪製多個不規則橢圓填色，接著於右側最後影格處，插入空白關鍵影格，再次使用橢圓工具重新繪製多個不規則橢圓填色（與影格1不相同位置與大小）。

最後建立遮色片圖層的形狀補間動畫與啟動遮色片圖層功能，完成倒影波紋的效果。

學習資訊推薦📐

Adobe Animate CC製作HTML5動畫與互動效果 多媒體網頁與UI設計師就業養成班