Animate CC 熱騰騰火鍋煙動畫
閱讀時間約 1 分鐘
自然現象效果煙的部分，尤其是在熱騰騰的食物上，包括火鍋、泡麵、溫泉等場景的煙，此種煙的特性是較為急促向上冒，也比較濃厚。
目標動畫效果:使用圓形漸層影片片段元件做為煙的構成內容，搭配在影片片段元件內製作多重的煙元件向上移動，只要安排得宜，即可完成頗具效果的熱騰騰煙霧。
使用動畫技巧:影片片段元件、傳統補間動畫、外框編輯。
使用動畫技巧:影片片段元件、傳統補間動畫、外框編輯。
Step1.
在範例檔之中，元件庫內的漸層圓影片片段元件，為使用放射狀漸層填色所繪製。新增影片片段『煙霧』，在影片片段內拉入漸層圓圖像元件，於影格80處插入關鍵影格，縮小關鍵影格1上的圓形漸層並略成長橢圓，點取關鍵影格80上的橢圓漸層，設定元件alpha=0 %，並且向上移動約200像素，加入傳統移動補間動畫，設定加/減速：100。
在範例檔之中，元件庫內的漸層圓影片片段元件，為使用放射狀漸層填色所繪製。新增影片片段『煙霧』，在影片片段內拉入漸層圓圖像元件，於影格80處插入關鍵影格，縮小關鍵影格1上的圓形漸層並略成長橢圓，點取關鍵影格80上的橢圓漸層，設定元件alpha=0 %，並且向上移動約200像素，加入傳統移動補間動畫，設定加/減速：100。
Step2.
選取整個移動補間動畫並執行複製影格，新增多個圖層，依序在每個圖層上不同的起始影格位置『貼上影格』，整理右側多餘影格，複製出多個圖層的逐漸上生並消失的煙霧。
選取整個移動補間動畫並執行複製影格，新增多個圖層，依序在每個圖層上不同的起始影格位置『貼上影格』，整理右側多餘影格，複製出多個圖層的逐漸上生並消失的煙霧。
Step3.
依序點取每個圖層上的頭一個關鍵影格上漸層圓，任意的上下左右移動其位置（時間軸上切換為外框編輯模式），同樣的對每個圖層上的最後一個影格，也進行漸層圓的位置調整，任意的上下左右移動其位置。
依序點取每個圖層上的頭一個關鍵影格上漸層圓，任意的上下左右移動其位置（時間軸上切換為外框編輯模式），同樣的對每個圖層上的最後一個影格，也進行漸層圓的位置調整，任意的上下左右移動其位置。
Step4.
回到場景上新增圖層，拉入煙霧影片片段，並將煙霧影片片段略微放大，二圖層於影格100處插入影格。
回到場景上新增圖層，拉入煙霧影片片段，並將煙霧影片片段略微放大，二圖層於影格100處插入影格。
新增多個圖層，依序在每個圖層上置入不同的放大煙霧（可以切換為外框編輯模式），最後選取每個圖層的第一個關鍵影格並向後移動，安排不同的開始時間，完成較自然排列的煙霧。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
為什麼會看到廣告
29會員
161內容數
藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!
留言0
查看全部
哩老師的沙龍 的其他內容
你可能也想看
創作者要怎麼好好休息 + 避免工作過量？《黑貓創作報#4》午安，最近累不累？
這篇不是虛假的關心。而是《黑貓創作報》發行以來可能最重要的一篇。
是的，我們這篇講怎麼補充能量，也就是怎麼休息。
2024-06-29
Unity Component | Animator Play and Transition這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
2023-01-09
Unity Animation | 3D Character and Animation這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站，以及安裝和放置遊戲中的簡易流程。
2022-09-26
Unity Animation | 高階程式參數控制這篇文章將會介紹 Unity Animatior Edit 參數控制的方法，藉由連結程式腳本和動畫編輯器，讓動畫更靈活的運作。
2022-09-09
Unity Animation | 簡易程式控制這篇文章將會講述 Animation 在設定後要如何使用程式觸發，並不介紹直接使用的 Animation，並簡易提到 Animator 的連結教學。
2022-09-07