Animate CC 進階照片光澤與動畫效果

更新於 發佈於 閱讀時間約 3 分鐘
raw-image

檢視範例】【下載範例

目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫技巧,細膩表現車子產品動作動畫,包括反光光澤,完成亮眼產品介紹。
使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。

Step1.
範例練習檔元件庫中包含車子、車身、車底、遮色片、輪轉影片片段等元件。

raw-image

直接進入車子影片片段元件內,於車身圖層影格30、35、40處插入關鍵影格,向上移動影格35與40上的車身元件,影格35上的移動較多,建立傳統補間表現車子煞車時的震動,車底圖層於影格40處插入影格。

raw-image

Step2.
新增影片片段元件『輪子轉』,置入輪轉圖元件並置中,於影格30處插入關鍵影格,建立傳統補間動畫,設定順時針旋轉一圈。新增圖層『前輪轉』,置入輪子轉元件並使用自由變形工具縮放、傾斜、旋轉來變形輪子轉元件,讓他與前車輪圈角度、尺寸相符合;相同方式再新增後輪轉圖層,同樣置入輪子轉元件並使用自由變形工具,調整與後車輪圈角度、尺寸相符合。

raw-image

Step3.
繼續在車子元件內,於前輪轉、後輪轉二圖層影格25、30處插入關鍵影格,並移除31之後的影格,設定影格30上二輪子轉元件顏色效果Alpha:0 %,建立影格25-30間傳統補間動畫。

raw-image

Step4.
回到場景上,於元件庫上重製車子元件為『車子光澤』,進入車子光澤元件內,刪除前後輪轉圖層,反選車身與車底圖層的影格1-39,並刪除影格,留下原來的影格40上內容。

raw-image

新增遮色片圖層,並置入遮色片元件對齊車子內容;再新增漸層光圖層於遮色片圖層之下,置入漸層光元件於車子左上角,並選轉漸層光成傾斜,於漸層光圖層上影格30、60處插入關鍵影格,其餘圖層於影格60處插入影格,移動影格30上的漸層光至右下角,建立傳統補間動畫,設定影格1-30加減速:-100、影格30-60加減速100,最後啟動遮色片圖層的遮色片功能完成車子光澤效果。

raw-image

Step5.
回到場景上,車子圖層於影格30、40插入關鍵影格(背景圖層於影格40插入影格),選取影格1的車子元件,等比例縮小並移動至場景左側的起始位置,建立影格1-30間的傳統補間、設定加減速:-100。新增車子光澤圖層,於影格40插入關鍵影格,置入車子光澤元件並對齊下方的移動車子(以輪子為對齊依據),對齊正確後,再移動車子光澤圖層的關鍵影格40至影格41處。

raw-image

最後於影格100處為車子光澤與背景二圖層插入影格,完成此動畫。

raw-image

相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果

留言
avatar-img
留言分享你的想法!
avatar-img
哩老師的沙龍
29會員
129內容數
多媒體設計的專業能力養成過程,除了有效率學習軟體之外,更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等,相關的整合應用有機會皆會與大家分享喔~
哩老師的沙龍的其他內容
2020/02/12
動畫裡最常需要的自然現象即是下雨,為了讓雨滴更寫實,因此使用雨滴元件而非一般的線段,搭配水面水紋漣漪與倒影的波動,來讓整個下雨場景更逼真! 目標動畫效果:利用影片片段元件安排大量的雨滴落下,加上以圓圈製作的水紋漣漪,以及以形狀補間動畫內容的遮色片表現倒影波動,完成逼真的
Thumbnail
2020/02/12
動畫裡最常需要的自然現象即是下雨,為了讓雨滴更寫實,因此使用雨滴元件而非一般的線段,搭配水面水紋漣漪與倒影的波動,來讓整個下雨場景更逼真! 目標動畫效果:利用影片片段元件安排大量的雨滴落下,加上以圓圈製作的水紋漣漪,以及以形狀補間動畫內容的遮色片表現倒影波動,完成逼真的
Thumbnail
2020/02/07
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫表現產品出現效果,再搭配形狀補間動畫的遮色片技巧,細膩表現產品的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含了所有將進行動畫的元件(直接由
Thumbnail
2020/02/07
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及遮色片動畫表現產品出現效果,再搭配形狀補間動畫的遮色片技巧,細膩表現產品的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含了所有將進行動畫的元件(直接由
Thumbnail
2020/02/07
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及應用逐格動畫的遮色片動畫技巧,細膩表現繪圖內容的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、逐格動畫、遮色片動畫、導引線。 Step1. 範例檔元件庫中包含了所有將進行遮色片繪圖的影片片段元件(
Thumbnail
2020/02/07
【檢視範例】【下載範例】 目標動畫效果:應用影片片段元件與傳統補間動畫,以及應用逐格動畫的遮色片動畫技巧,細膩表現繪圖內容的動態呈現。 使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、逐格動畫、遮色片動畫、導引線。 Step1. 範例檔元件庫中包含了所有將進行遮色片繪圖的影片片段元件(
Thumbnail
看更多
你可能也想看
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
提供一條簡單公式、一套盤點思路,幫助你快速算出去日本自助旅遊需要準備多少日幣現金!
Thumbnail
提供一條簡單公式、一套盤點思路,幫助你快速算出去日本自助旅遊需要準備多少日幣現金!
Thumbnail
Animation Presets 是預設的動畫效果和屬性設定,套用後就可以做出動畫效果。 Animate Out 是預設的文字出場(離開)效果。
Thumbnail
Animation Presets 是預設的動畫效果和屬性設定,套用後就可以做出動畫效果。 Animate Out 是預設的文字出場(離開)效果。
Thumbnail
Animation Presets 是預設的動畫效果和屬性設定,套用後就可以做出動畫效果,無需從零開始進行複雜的調整。 其中的 Animate In 是讓文字以各種動畫方式進場。可用來製作標題或字幕進場的動畫。
Thumbnail
Animation Presets 是預設的動畫效果和屬性設定,套用後就可以做出動畫效果,無需從零開始進行複雜的調整。 其中的 Animate In 是讓文字以各種動畫方式進場。可用來製作標題或字幕進場的動畫。
Thumbnail
從2021年就在日本巡迴的《Animage雜誌和吉卜力展》,現在從1/8~4/6在華山1914文創園區東2C、D棟展出。
Thumbnail
從2021年就在日本巡迴的《Animage雜誌和吉卜力展》,現在從1/8~4/6在華山1914文創園區東2C、D棟展出。
Thumbnail
在這一章中,我們介紹了 CSS 的過渡效果和動畫效果。過渡效果使 CSS 屬性的變化更加平滑,而動畫效果則允許我們更精細地控制元素的多個屬性隨時間變化的過程。我們通過基本語法和示例展示了如何使用這些效果,並提供了一個綜合應用的實踐案例來幫助理解。這些技術可以讓你的網頁更具互動性和動態效果。
Thumbnail
在這一章中,我們介紹了 CSS 的過渡效果和動畫效果。過渡效果使 CSS 屬性的變化更加平滑,而動畫效果則允許我們更精細地控制元素的多個屬性隨時間變化的過程。我們通過基本語法和示例展示了如何使用這些效果,並提供了一個綜合應用的實踐案例來幫助理解。這些技術可以讓你的網頁更具互動性和動態效果。
Thumbnail
本文介紹瞭如何使用 Photoshop 和 Cinema 4D 創建手繪風格動畫場景。從照片處理到模型建模、材質貼圖、額外元素建模、光線和打光、渲染與後期處理,逐步解說了創建過程。通過這些建議,你將能夠創建一個既細緻又富有動畫效果的手繪風格場景,為你的動畫作品增添獨特的魅力和視覺吸引力。
Thumbnail
本文介紹瞭如何使用 Photoshop 和 Cinema 4D 創建手繪風格動畫場景。從照片處理到模型建模、材質貼圖、額外元素建模、光線和打光、渲染與後期處理,逐步解說了創建過程。通過這些建議,你將能夠創建一個既細緻又富有動畫效果的手繪風格場景,為你的動畫作品增添獨特的魅力和視覺吸引力。
Thumbnail
Ae 小技巧:CC Bend It 彎曲 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:CC Bend It 彎曲 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
跑片人早在各家電影院的後門等著接送大明星,加長禮車是腳踏車一輛,在十幾個鐵盤固定腳踏車後座,下一個換本符號浮上之前,腳踏車沿著台北柏油路面猛力踩著踏板往前輸送,銀色輪軸交錯一如電影放映機吞吐膠片正快轉。——《髒東西》
Thumbnail
跑片人早在各家電影院的後門等著接送大明星,加長禮車是腳踏車一輛,在十幾個鐵盤固定腳踏車後座,下一個換本符號浮上之前,腳踏車沿著台北柏油路面猛力踩著踏板往前輸送,銀色輪軸交錯一如電影放映機吞吐膠片正快轉。——《髒東西》
Thumbnail
Ae 小技巧:Mask path 轉成形狀路徑 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
Ae 小技巧:Mask path 轉成形狀路徑 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
More than just decorative elements, animations can make digital interactions feel more natural and intuitive.
Thumbnail
More than just decorative elements, animations can make digital interactions feel more natural and intuitive.
Thumbnail
In the current UI/UX web design & app design trends, loading animations have become an indispensable element.
Thumbnail
In the current UI/UX web design & app design trends, loading animations have become an indispensable element.
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News