2020-02-06|閱讀時間 ‧ 約 2 分鐘

Animate CC 熱騰騰火鍋煙動畫

自然現象效果煙的部分,尤其是在熱騰騰的食物上,包括火鍋、泡麵、溫泉等場景的煙,此種煙的特性是較為急促向上冒,也比較濃厚。
目標動畫效果:使用圓形漸層影片片段元件做為煙的構成內容,搭配在影片片段元件內製作多重的煙元件向上移動,只要安排得宜,即可完成頗具效果的熱騰騰煙霧。 使用動畫技巧:影片片段元件、傳統補間動畫、外框編輯。
Step1. 在範例檔之中,元件庫內的漸層圓影片片段元件,為使用放射狀漸層填色所繪製。新增影片片段『煙霧』,在影片片段內拉入漸層圓圖像元件,於影格80處插入關鍵影格,縮小關鍵影格1上的圓形漸層並略成長橢圓,點取關鍵影格80上的橢圓漸層,設定元件alpha=0 %,並且向上移動約200像素,加入傳統移動補間動畫,設定加/減速:100。
Step2. 選取整個移動補間動畫並執行複製影格,新增多個圖層,依序在每個圖層上不同的起始影格位置『貼上影格』,整理右側多餘影格,複製出多個圖層的逐漸上生並消失的煙霧。
Step3. 依序點取每個圖層上的頭一個關鍵影格上漸層圓,任意的上下左右移動其位置(時間軸上切換為外框編輯模式),同樣的對每個圖層上的最後一個影格,也進行漸層圓的位置調整,任意的上下左右移動其位置。
Step4. 回到場景上新增圖層,拉入煙霧影片片段,並將煙霧影片片段略微放大,二圖層於影格100處插入影格。
新增多個圖層,依序在每個圖層上置入不同的放大煙霧(可以切換為外框編輯模式),最後選取每個圖層的第一個關鍵影格並向後移動,安排不同的開始時間,完成較自然排列的煙霧。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
分享至
成為作者繼續創作的動力吧!
藉由Animate CC製作網頁上的動畫,並發佈成HTML5+CANVAS+JAVASCRIPT格式,已是最有效率設計製作專業網頁動畫效果的方式,筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧,歡迎一起讓網頁上的內容動起來!
從 Google News 追蹤更多 vocus 的最新精選內容從 Google News 追蹤更多 vocus 的最新精選內容

哩老師的沙龍 的其他內容

發表回應

成為會員 後即可發表留言
© 2024 vocus All rights reserved.