Animate CC 花飄落水中動畫
閱讀時間約 2 分鐘
若要表現花飄落的效果，除了落下的軌跡外，最重要的是花在落下的同時是伴隨著細微的旋轉，最後再以導引線控制飄落軌跡與搭配落入水中時的水紋，即可完成！
目標動畫效果:搭配影片片段元件與導引線的使用，加上水紋與移動的安排，來完成花落入水中的各個細節。
使用動畫技巧:影片片段元件、傳統補間動畫、移動補間動畫、導引線。
使用動畫技巧:影片片段元件、傳統補間動畫、移動補間動畫、導引線。
Step1.
範例檔元件庫中包含花朵與白圈二元件。新增影片片段元件『花朵旋轉』，置入花朵元件於中心並建立移動補間動畫，分別於影格10、20、30插入關鍵影格（全部），於影格20與30上使用『變形工具』略微旋轉花朵元件。
範例檔元件庫中包含花朵與白圈二元件。新增影片片段元件『花朵旋轉』，置入花朵元件於中心並建立移動補間動畫，分別於影格10、20、30插入關鍵影格（全部），於影格20與30上使用『變形工具』略微旋轉花朵元件。
Step2.
回到場景上，新增花朵旋轉圖層並置入花朵旋轉元件於右上角樹枝上，於影格90插入關鍵影格移動花朵至水面上並建立傳統補間動畫，背景圖層於影格90插入影格。
回到場景上，新增花朵旋轉圖層並置入花朵旋轉元件於右上角樹枝上，於影格90插入關鍵影格移動花朵至水面上並建立傳統補間動畫，背景圖層於影格90插入影格。
新增花朵旋轉圖層的導引線圖層，使用鉛筆工具繪製花朵落下的軌跡，移動前後關鍵影格上的花朵元件使其中心點吸附導引線，完成花朵的導引線動畫。
Step3.
新增水面花朵圖層，於影格90處插入關鍵影格並置入『花朵』元件使其對齊花朵旋轉元件的位置，移動關鍵影格90至91處，再於影格120處插入關鍵影格，背景圖層於影格130處插入影格。向下移動影格130上的花朵並設定 Alpha:0，建立傳統補間動畫，設定訂加減速：100；
新增水面花朵圖層，於影格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個影格時間差的安排。
新增影片片段元件『水紋』，置入白圈元件並於影格5、20插入關鍵影格，設定影格1上的白圈Alpha:0、放大影格20上的白圈並設定Alpha:0，建立傳統補間動畫，設定影格5-20間加減速：100。向上新增四個圖層，反選圖層1上所有影格並移動複製至上方圖層上（按住Alt），成5個影格時間差的安排。
Step5.
回到場景上，新增水紋圖層於水面花朵圖層之下，並於影格91處插入關鍵影格，置入水紋元件於水面花朵下方，壓扁變形並設定Alpha:30％，完成此範例效果。
回到場景上，新增水紋圖層於水面花朵圖層之下，並於影格91處插入關鍵影格，置入水紋元件於水面花朵下方，壓扁變形並設定Alpha:30％，完成此範例效果。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
為什麼會看到廣告
29會員
161Content count
藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!
留言0
查看全部
你可能也想看
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站，以及安裝和放置遊戲中的簡易流程。
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法，藉由連結程式腳本和動畫編輯器，讓動畫更靈活的運作。
這篇文章將會講述 Animation 在設定後要如何使用程式觸發，並不介紹直接使用的 Animation，並簡易提到 Animator 的連結教學。
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站，以及安裝和放置遊戲中的簡易流程。
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法，藉由連結程式腳本和動畫編輯器，讓動畫更靈活的運作。
這篇文章將會講述 Animation 在設定後要如何使用程式觸發，並不介紹直接使用的 Animation，並簡易提到 Animator 的連結教學。