方格精選
Animate CC 雨滴滴落倒影波動動畫
更新於 發佈於 閱讀時間約 2 分鐘
動畫裡最常需要的自然現象即是下雨，為了讓雨滴更寫實，因此使用雨滴元件而非一般的線段，搭配水面水紋漣漪與倒影的波動，來讓整個下雨場景更逼真！
目標動畫效果:利用影片片段元件安排大量的雨滴落下，加上以圓圈製作的水紋漣漪，以及以形狀補間動畫內容的遮色片表現倒影波動，完成逼真的雨中場景。
使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片。
目標動畫效果:利用影片片段元件安排大量的雨滴落下，加上以圓圈製作的水紋漣漪，以及以形狀補間動畫內容的遮色片表現倒影波動，完成逼真的雨中場景。
使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片。
Step1.
範例檔元件庫中的雨滴（漸層填色繪製）與圓圈是所需要的簡單素材。新增『漣漪』影片片段元件，拉入圓圈圖像元件，在影格20處插入關鍵影格，縮小影格1的圓圈、放大影格20的圓圈並設定Alpha=0，加上傳統補間動畫、加/減速：100。將完成的圈放大動畫影格，複製至第二個圖層的影格5開始，成二個圈放大的動畫。
範例檔元件庫中的雨滴（漸層填色繪製）與圓圈是所需要的簡單素材。新增『漣漪』影片片段元件，拉入圓圈圖像元件，在影格20處插入關鍵影格，縮小影格1的圓圈、放大影格20的圓圈並設定Alpha=0，加上傳統補間動畫、加/減速：100。將完成的圈放大動畫影格，複製至第二個圖層的影格5開始，成二個圈放大的動畫。
Step2.
新增『雨滴動畫』影片片段，拉入雨滴元件縮小並旋轉變形成斜落狀，於影格15處插入關鍵影格，並移動雨滴至左下，建立傳統補間動畫。於影格16處插入空白關鍵影格，拉入漣漪圖像元件，於影格39處插入影格，使用描圖紙功能方便檢視並編輯雨滴與漣漪間的正確位置，壓扁漣漪成扁長形，且位置為雨滴著地處。
新增『雨滴動畫』影片片段，拉入雨滴元件縮小並旋轉變形成斜落狀，於影格15處插入關鍵影格，並移動雨滴至左下，建立傳統補間動畫。於影格16處插入空白關鍵影格，拉入漣漪圖像元件，於影格39處插入影格，使用描圖紙功能方便檢視並編輯雨滴與漣漪間的正確位置，壓扁漣漪成扁長形，且位置為雨滴著地處。
Step3.
新增『雨滴群』影片片段，拉入雨滴動畫元件並於影格39處插入影格，複製單個雨滴動畫全部影格至多個圖層上，並調整每個圖層上的動畫起始時間，使用『編輯多個影格』功能，設定每個雨滴動畫的不同位置、尺寸、alpha等。
新增『雨滴群』影片片段，拉入雨滴動畫元件並於影格39處插入影格，複製單個雨滴動畫全部影格至多個圖層上，並調整每個圖層上的動畫起始時間，使用『編輯多個影格』功能，設定每個雨滴動畫的不同位置、尺寸、alpha等。
Step4.
回到場景上，拉入雨滴群元件，安排多個雨滴群元件至多個圖層上，並調整每個圖層上的動畫起始時間與每個雨滴群的不同位置、尺寸、alpha等。為所有圖層於影格100處插入影格，依序反選並移動各雨滴群影格成依序出現，倒影與背景圖層於雨滴群圖層的最後一個影格處插入影格。
回到場景上，拉入雨滴群元件，安排多個雨滴群元件至多個圖層上，並調整每個圖層上的動畫起始時間與每個雨滴群的不同位置、尺寸、alpha等。為所有圖層於影格100處插入影格，依序反選並移動各雨滴群影格成依序出現，倒影與背景圖層於雨滴群圖層的最後一個影格處插入影格。
Step5.
新增倒影放大圖層於倒影圖層之上，複製並原地貼上倒影內容，鎖定倒影圖層，確定選取倒影放大圖層上的倒影元件，按住Shift原地微放大倒影。新增倒影遮色片圖層於倒影放大圖層之上，使用橢圓工具繪製多個不規則橢圓填色，接著於右側最後影格處，插入空白關鍵影格，再次使用橢圓工具重新繪製多個不規則橢圓填色（與影格1不相同位置與大小）。
新增倒影放大圖層於倒影圖層之上，複製並原地貼上倒影內容，鎖定倒影圖層，確定選取倒影放大圖層上的倒影元件，按住Shift原地微放大倒影。新增倒影遮色片圖層於倒影放大圖層之上，使用橢圓工具繪製多個不規則橢圓填色，接著於右側最後影格處，插入空白關鍵影格，再次使用橢圓工具重新繪製多個不規則橢圓填色（與影格1不相同位置與大小）。
最後建立遮色片圖層的形狀補間動畫與啟動遮色片圖層功能，完成倒影波紋的效果。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
為什麼會看到廣告
29會員
129內容數
多媒體設計的專業能力養成過程，除了有效率學習軟體之外，更重要的是各個軟體間的整合應用!
Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等，相關的整合應用有機會皆會與大家分享喔~
留言0
查看全部
你可能也想看
Google News 追蹤
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
自從遮雨棚做好，就開始逐一解決各種問題。
雖然上面有遮蓋，但邊邊角角落下來的地方，
還是會是因為水的流動讓廣場中間和四周圍帶點濕濕的感覺，
而讓乾燥度不夠。
逐漸地在每一次下雨就開始觀察，到底水積在哪裡?它是怎麼流動的?
流到哪裡去?
到那裏去之後會不會又積成一灘?
如果積在那裡，
Ae 小技巧：Adjustment Layer 調整圖層
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
自從遮雨棚做好，就開始逐一解決各種問題。
雖然上面有遮蓋，但邊邊角角落下來的地方，
還是會是因為水的流動讓廣場中間和四周圍帶點濕濕的感覺，
而讓乾燥度不夠。
逐漸地在每一次下雨就開始觀察，到底水積在哪裡?它是怎麼流動的?
流到哪裡去?
到那裏去之後會不會又積成一灘?
如果積在那裡，
Ae 小技巧：Adjustment Layer 調整圖層
動態後記系列會記錄一些我在製作中的記錄，可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇，就是補充用的小筆記，沒有前後順序，可跳著閱讀。