Animate CC 熱騰騰火鍋煙動畫

閱讀時間約 1 分鐘
自然現象效果煙的部分,尤其是在熱騰騰的食物上,包括火鍋、泡麵、溫泉等場景的煙,此種煙的特性是較為急促向上冒,也比較濃厚。
目標動畫效果:使用圓形漸層影片片段元件做為煙的構成內容,搭配在影片片段元件內製作多重的煙元件向上移動,只要安排得宜,即可完成頗具效果的熱騰騰煙霧。
使用動畫技巧:影片片段元件、傳統補間動畫、外框編輯。
Step1.
在範例檔之中,元件庫內的漸層圓影片片段元件,為使用放射狀漸層填色所繪製。新增影片片段『煙霧』,在影片片段內拉入漸層圓圖像元件,於影格80處插入關鍵影格,縮小關鍵影格1上的圓形漸層並略成長橢圓,點取關鍵影格80上的橢圓漸層,設定元件alpha=0 %,並且向上移動約200像素,加入傳統移動補間動畫,設定加/減速:100。
Step2.
選取整個移動補間動畫並執行複製影格,新增多個圖層,依序在每個圖層上不同的起始影格位置『貼上影格』,整理右側多餘影格,複製出多個圖層的逐漸上生並消失的煙霧。
Step3.
依序點取每個圖層上的頭一個關鍵影格上漸層圓,任意的上下左右移動其位置(時間軸上切換為外框編輯模式),同樣的對每個圖層上的最後一個影格,也進行漸層圓的位置調整,任意的上下左右移動其位置。
Step4.
回到場景上新增圖層,拉入煙霧影片片段,並將煙霧影片片段略微放大,二圖層於影格100處插入影格。
新增多個圖層,依序在每個圖層上置入不同的放大煙霧(可以切換為外框編輯模式),最後選取每個圖層的第一個關鍵影格並向後移動,安排不同的開始時間,完成較自然排列的煙霧。
為什麼會看到廣告
29會員
161內容數
藉由Animate CC製作網頁上的動畫,並發佈成HTML5+CANVAS+JAVASCRIPT格式,已是最有效率設計製作專業網頁動畫效果的方式,筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧,歡迎一起讓網頁上的內容動起來!
留言0
查看全部
發表第一個留言支持創作者!
哩老師的沙龍 的其他內容
【檢視範例】【下載範例】 以漸層繪製的光束來表現移動的同時,出現文字框內容,表現光束刻畫出文字框的動畫。應用的方式是結合導引線控制光束移動,同時以遮色片逐格動畫方式控制文字外框內容的顯示,只要搭配得宜即可完成漸層光束刻字。 目標動畫效果:導引線控制光束移動,搭配遮色片控制文字外框的顯示,時間點搭配
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
【檢視範例】【下載範例】 應用影片片段元件與傳統補間動畫來整合遮色片動畫,呈現照片上鏡片看圖的效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 元件庫中包含放大鏡與鏡片元件。暫時隱藏放大鏡圖層,在鏡片遮色片圖層上插入多個關鍵影格,並依序移動遮色片元件於場景上不同位置,建立
【檢視範例】【下載範例】 以漸層繪製的光束來表現移動的同時,出現文字框內容,表現光束刻畫出文字框的動畫。應用的方式是結合導引線控制光束移動,同時以遮色片逐格動畫方式控制文字外框內容的顯示,只要搭配得宜即可完成漸層光束刻字。 目標動畫效果:導引線控制光束移動,搭配遮色片控制文字外框的顯示,時間點搭配
【檢視範例】【下載範例】 在Animate動畫中的文字效果,還有中文字依筆畫,書寫出文字內容的文字動畫效果,只要將各筆畫分圖層,再依序以遮色片上的形狀補間動畫或逐格動畫,控制各筆畫出現即可。 目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式,來呈現分圖層的各文字筆畫書寫畫出,加上速度與時間差
【檢視範例】【下載範例】 應用影片片段元件與傳統補間動畫來整合遮色片動畫,呈現照片上鏡片看圖的效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 元件庫中包含放大鏡與鏡片元件。暫時隱藏放大鏡圖層,在鏡片遮色片圖層上插入多個關鍵影格,並依序移動遮色片元件於場景上不同位置,建立
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
又到了一個月結束,暑假沒有想像中的用功,這一次畫的是引導線和元件腳色的圖層
Thumbnail
資源彎曲工具,終於要來做一隻會動的貓咪。
Thumbnail
電腦有點反應遲鈍,而且雲朵如果要加上模糊的濾鏡,就一定要重開軟體才看的到效果。
Thumbnail
看了一些動畫學習者的心路過程,有些有文字的習慣,就是把自己的發想寫成部落格,或是寫一些學習的體驗。
Thumbnail
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
Thumbnail
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站,以及安裝和放置遊戲中的簡易流程。
Thumbnail
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法,藉由連結程式腳本和動畫編輯器,讓動畫更靈活的運作。
Thumbnail
這篇文章將會講述 Animation 在設定後要如何使用程式觸發,並不介紹直接使用的 Animation,並簡易提到 Animator 的連結教學。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
又到了一個月結束,暑假沒有想像中的用功,這一次畫的是引導線和元件腳色的圖層
Thumbnail
資源彎曲工具,終於要來做一隻會動的貓咪。
Thumbnail
電腦有點反應遲鈍,而且雲朵如果要加上模糊的濾鏡,就一定要重開軟體才看的到效果。
Thumbnail
看了一些動畫學習者的心路過程,有些有文字的習慣,就是把自己的發想寫成部落格,或是寫一些學習的體驗。
Thumbnail
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
Thumbnail
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站,以及安裝和放置遊戲中的簡易流程。
Thumbnail
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法,藉由連結程式腳本和動畫編輯器,讓動畫更靈活的運作。
Thumbnail
這篇文章將會講述 Animation 在設定後要如何使用程式觸發,並不介紹直接使用的 Animation,並簡易提到 Animator 的連結教學。