Animate CC 照片放大鏡效果動畫

發佈於Animate CC 網頁動畫與JS互動

更新於 2025/02/05發佈於 2020/02/06閱讀時間約 1 分鐘

raw-image

【檢視範例】【下載範例】
應用影片片段元件與傳統補間動畫來整合遮色片動畫，呈現照片上鏡片看圖的效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。

Step1.
元件庫中包含放大鏡與鏡片元件。暫時隱藏放大鏡圖層，在鏡片遮色片圖層上插入多個關鍵影格，並依序移動遮色片元件於場景上不同位置，建立傳統補間動畫，讓鏡片遮色片於清楚照片上移動。

raw-image

Step2.
顯示放大鏡圖層，同樣依遮色片圖層關鍵影格建立關鍵影格，並確認每個關鍵影格上的放大鏡對齊遮色片元件，同樣建立傳統補間。

raw-image

Step 3.
最後設定遮色片圖層的遮色片功能，遮色片控制清楚相片顯示，搭配放大鏡物件的移動，完成相片呈現效果範例。

raw-image

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

#遮色片動畫

哩老師的沙龍Animate CC 網頁動畫與JS互動遮色片動畫哩老師的沙龍Animate CC 網頁動畫與JS互動動畫效果

留言

留言分享你的想法！

哩老師的沙龍

29會員

129內容數

多媒體設計的專業能力養成過程，除了有效率學習軟體之外，更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等，相關的整合應用有機會皆會與大家分享喔~

哩老師的沙龍的其他內容

2020/02/13

Animate CC Q版側面跑步動畫

Q版人物通常都是頭大、手短、腳短，因此在跑步時的動作步伐比較小，同樣需要注意手腳與身體元件的配合，搭配傳統補間動畫即可確保跑步動作的流暢。目標動畫效果:應用影片片段元件表現可愛人物的跑步動作，除了元件的準備與安排來表現動作之外，以傳統補間動畫讓動作更為流暢。使用動畫技

2020/02/13

Animate CC Q版側面跑步動畫

Q版人物通常都是頭大、手短、腳短，因此在跑步時的動作步伐比較小，同樣需要注意手腳與身體元件的配合，搭配傳統補間動畫即可確保跑步動作的流暢。目標動畫效果:應用影片片段元件表現可愛人物的跑步動作，除了元件的準備與安排來表現動作之外，以傳統補間動畫讓動作更為流暢。使用動畫技

2020/02/13

Animate CC Q版照片人物動畫

對於是以相片人物來製作動畫時，當然必需要在Photoshop中事先處裡好每個元件細節，然後再正確匯入Animate中來完成動畫，同樣是需要注意元件變形中心與動畫動作的設定。目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫，需注意匯入檔案的正確方式，除了元件的準備

2020/02/13

Animate CC Q版照片人物動畫

對於是以相片人物來製作動畫時，當然必需要在Photoshop中事先處裡好每個元件細節，然後再正確匯入Animate中來完成動畫，同樣是需要注意元件變形中心與動畫動作的設定。目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫，需注意匯入檔案的正確方式，除了元件的準備

2020/02/13

Animate CC 線條人物側面跑步動畫

接著將介紹更為細膩的角色跑步動畫，細膩處即是手與腳都各分為二部分，因此無論是各元件的調整與設定都需要更仔細，否則將有元件中途分開的問題。目標動畫效果:應用影片片段元件表現線條人物的的跑步，除了元件的準備與安排來表現動作之外，手與腳的部分均以二元件組成，所有元件將以傳統補

2020/02/13

Animate CC 線條人物側面跑步動畫

接著將介紹更為細膩的角色跑步動畫，細膩處即是手與腳都各分為二部分，因此無論是各元件的調整與設定都需要更仔細，否則將有元件中途分開的問題。目標動畫效果:應用影片片段元件表現線條人物的的跑步，除了元件的準備與安排來表現動作之外，手與腳的部分均以二元件組成，所有元件將以傳統補

你可能也想看

Dr HI的眼科沙龍

光的選擇，就是視力的選擇— Philips 飛利浦 A5 軒博全光譜智能LED護眼檯燈

大家好，我是一名眼科醫師，也是一位孩子的媽身為眼科醫師的我，我知道視力發展對孩子來說有多關鍵。每到開學季時，診間便充斥著許多憂心忡忡的家屬。近年來看診中，兒童提早近視、眼睛疲勞的案例明顯增加，除了3C使用過度，最常被忽略的，就是照明品質。然而作為一位媽媽，孩子能在安全、舒適的環境

#momo購物網#Philips飛利浦#軒博

2025/04/30

Dr HI的眼科沙龍

光的選擇，就是視力的選擇— Philips 飛利浦 A5 軒博全光譜智能LED護眼檯燈

大家好，我是一名眼科醫師，也是一位孩子的媽身為眼科醫師的我，我知道視力發展對孩子來說有多關鍵。每到開學季時，診間便充斥著許多憂心忡忡的家屬。近年來看診中，兒童提早近視、眼睛疲勞的案例明顯增加，除了3C使用過度，最常被忽略的，就是照明品質。然而作為一位媽媽，孩子能在安全、舒適的環境

#momo購物網#Philips飛利浦#軒博

2025/04/30

方格子 vocus 官方沙龍

♥️ 5 月主題活動：我的媽呀！母親節快樂！

我的「媽」呀！母親節即將到來，vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常，或是一直想對她表達的感謝，又或者，是你這輩子最想聽她說出的一句話。也歡迎你曬出合照，分享照片背後的點點滴滴 ♥️ 透過創作，將這份情感表達出來吧！🥹

#母親節#媽媽美照#媽媽日常

2025/05/01

方格子 vocus 官方沙龍

♥️ 5 月主題活動：我的媽呀！母親節快樂！

我的「媽」呀！母親節即將到來，vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常，或是一直想對她表達的感謝，又或者，是你這輩子最想聽她說出的一句話。也歡迎你曬出合照，分享照片背後的點點滴滴 ♥️ 透過創作，將這份情感表達出來吧！🥹

#母親節#媽媽美照#媽媽日常

2025/05/01

哩老師的沙龍

Photoshop CC 遮色片與模糊濾鏡應用

在影像合成上使用遮色片編輯，除了他的隨時可編輯性之外，建立的遮色片還能夠使用濾鏡來更改遮色片的邊緣效果，其中遮色片加上高斯模糊，讓遮色片邊緣模糊而成為可即時控制的邊緣羽化效果，是影像合成中很重要的技法。 Step1. 開啟範例練習檔，檔案中的圖層1影像內容，目的可以與背景影像搭配，而圖層1上的影像

#遮色片#去背合成#影像效果

2020/02/18

哩老師的沙龍

Photoshop CC 遮色片與模糊濾鏡應用

在影像合成上使用遮色片編輯，除了他的隨時可編輯性之外，建立的遮色片還能夠使用濾鏡來更改遮色片的邊緣效果，其中遮色片加上高斯模糊，讓遮色片邊緣模糊而成為可即時控制的邊緣羽化效果，是影像合成中很重要的技法。 Step1. 開啟範例練習檔，檔案中的圖層1影像內容，目的可以與背景影像搭配，而圖層1上的影像

#遮色片#去背合成#影像效果

2020/02/18

哩老師的沙龍

Animate CC 按鈕與動畫互動切換

目標動畫效果:應用影片片段元件與傳統補間動畫，以及多個影片片段元件的組合，包括遮色片動畫技巧，最後結合按鈕元件的使用與停止動作行為，完成互動按鈕的動態效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔內場景上各個動畫素材均已各自轉換為

#javaScript互動

2020/02/15

哩老師的沙龍

Animate CC 按鈕與動畫互動切換

目標動畫效果:應用影片片段元件與傳統補間動畫，以及多個影片片段元件的組合，包括遮色片動畫技巧，最後結合按鈕元件的使用與停止動作行為，完成互動按鈕的動態效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔內場景上各個動畫素材均已各自轉換為

#javaScript互動

2020/02/15

哩老師的沙龍

Animate CC Q版照片人物動畫

對於是以相片人物來製作動畫時，當然必需要在Photoshop中事先處裡好每個元件細節，然後再正確匯入Animate中來完成動畫，同樣是需要注意元件變形中心與動畫動作的設定。目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫，需注意匯入檔案的正確方式，除了元件的準備

2020/02/13

哩老師的沙龍

Animate CC Q版照片人物動畫

對於是以相片人物來製作動畫時，當然必需要在Photoshop中事先處裡好每個元件細節，然後再正確匯入Animate中來完成動畫，同樣是需要注意元件變形中心與動畫動作的設定。目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫，需注意匯入檔案的正確方式，除了元件的準備

2020/02/13

哩老師的沙龍

Animate CC 遮色片場景與產品動畫效果

【檢視範例】【下載範例】目標動畫效果:應用影片片段元件與傳統補間動畫，以及遮色片動畫表現產品出現效果，再搭配形狀補間動畫的遮色片技巧，細膩表現產品的動態呈現。使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含了所有將進行動畫的元件（直接由

#遮色片動畫

2020/02/07

哩老師的沙龍

Animate CC 遮色片場景與產品動畫效果

【檢視範例】【下載範例】目標動畫效果:應用影片片段元件與傳統補間動畫，以及遮色片動畫表現產品出現效果，再搭配形狀補間動畫的遮色片技巧，細膩表現產品的動態呈現。使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含了所有將進行動畫的元件（直接由

#遮色片動畫

2020/02/07

哩老師的沙龍

Animate CC 遮色片細膩繪圖動畫

【檢視範例】【下載範例】目標動畫效果:應用影片片段元件與傳統補間動畫，以及應用逐格動畫的遮色片動畫技巧，細膩表現繪圖內容的動態呈現。使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、逐格動畫、遮色片動畫、導引線。 Step1. 範例檔元件庫中包含了所有將進行遮色片繪圖的影片片段元件（

#導引線動畫#遮色片動畫

2020/02/07

哩老師的沙龍

Animate CC 遮色片細膩繪圖動畫

【檢視範例】【下載範例】目標動畫效果:應用影片片段元件與傳統補間動畫，以及應用逐格動畫的遮色片動畫技巧，細膩表現繪圖內容的動態呈現。使用動畫技巧:影片片段元件、傳統補間動畫、形狀補間動畫、逐格動畫、遮色片動畫、導引線。 Step1. 範例檔元件庫中包含了所有將進行遮色片繪圖的影片片段元件（

#導引線動畫#遮色片動畫

2020/02/07

哩老師的沙龍

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

【檢視範例】【下載範例】目標動畫效果:應用影片片段元件與傳統補間動畫，以及遮色片動畫技巧，細膩表現車子產品動作動畫，包括反光光澤，完成亮眼產品介紹。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例練習檔元件庫中包含車子、車身、車底、遮色片、輪轉影片片段等元件。

#遮色片動畫

2020/02/07

哩老師的沙龍

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

【檢視範例】【下載範例】目標動畫效果:應用影片片段元件與傳統補間動畫，以及遮色片動畫技巧，細膩表現車子產品動作動畫，包括反光光澤，完成亮眼產品介紹。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例練習檔元件庫中包含車子、車身、車底、遮色片、輪轉影片片段等元件。

#遮色片動畫

2020/02/07

哩老師的沙龍

Animate CC 遮色片光澤效果動畫

【檢視範例】【下載範例】目標動畫效果:應用影片片段元件與傳統補間動畫，以及遮色片動畫技巧，表現金屬框與文字的光澤效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含文字、圓與漸層光三元件。點取場景上文字元件並複製，新增圖層，於圖層上原地貼上文字元件

#遮色片動畫

2020/02/07

哩老師的沙龍

Animate CC 遮色片光澤效果動畫

【檢視範例】【下載範例】目標動畫效果:應用影片片段元件與傳統補間動畫，以及遮色片動畫技巧，表現金屬框與文字的光澤效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔元件庫中包含文字、圓與漸層光三元件。點取場景上文字元件並複製，新增圖層，於圖層上原地貼上文字元件

#遮色片動畫

2020/02/07

哩老師的沙龍

Animate CC 畫線與色塊變形繪圖動畫

【檢視範例】【下載範例】應用形狀補間動畫的物件變形特點，再搭配遮色片功能，不需要藉助任何的元件與濾鏡效果，即可完美演繹目標內容的動態呈現。目標動畫效果:應用形狀補間動畫完成畫線條動畫，以及搭配遮色片呈現內容出現的效果，並細膩設定物件變形與時間點控制，達成繪圖動畫的目地。使用動畫技巧:形狀補間

#遮色片動畫

2020/02/07

哩老師的沙龍

Animate CC 畫線與色塊變形繪圖動畫

【檢視範例】【下載範例】應用形狀補間動畫的物件變形特點，再搭配遮色片功能，不需要藉助任何的元件與濾鏡效果，即可完美演繹目標內容的動態呈現。目標動畫效果:應用形狀補間動畫完成畫線條動畫，以及搭配遮色片呈現內容出現的效果，並細膩設定物件變形與時間點控制，達成繪圖動畫的目地。使用動畫技巧:形狀補間

#遮色片動畫

2020/02/07

哩老師的沙龍

Animate CC 書寫中文字動畫

【檢視範例】【下載範例】在Animate動畫中的文字效果，還有中文字依筆畫，書寫出文字內容的文字動畫效果，只要將各筆畫分圖層，再依序以遮色片上的形狀補間動畫或逐格動畫，控制各筆畫出現即可。目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式，來呈現分圖層的各文字筆畫書寫畫出，加上速度與時間差

#遮色片動畫#動畫效果

2020/02/06

哩老師的沙龍

Animate CC 書寫中文字動畫

【檢視範例】【下載範例】在Animate動畫中的文字效果，還有中文字依筆畫，書寫出文字內容的文字動畫效果，只要將各筆畫分圖層，再依序以遮色片上的形狀補間動畫或逐格動畫，控制各筆畫出現即可。目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式，來呈現分圖層的各文字筆畫書寫畫出，加上速度與時間差

#遮色片動畫#動畫效果

2020/02/06

哩老師的沙龍

Animate CC 照片放大鏡效果動畫

【檢視範例】【下載範例】應用影片片段元件與傳統補間動畫來整合遮色片動畫，呈現照片上鏡片看圖的效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 元件庫中包含放大鏡與鏡片元件。暫時隱藏放大鏡圖層，在鏡片遮色片圖層上插入多個關鍵影格，並依序移動遮色片元件於場景上不同位置，建立

#遮色片動畫#動畫效果

2020/02/06

哩老師的沙龍

Animate CC 照片放大鏡效果動畫

【檢視範例】【下載範例】應用影片片段元件與傳統補間動畫來整合遮色片動畫，呈現照片上鏡片看圖的效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 元件庫中包含放大鏡與鏡片元件。暫時隱藏放大鏡圖層，在鏡片遮色片圖層上插入多個關鍵影格，並依序移動遮色片元件於場景上不同位置，建立

#遮色片動畫#動畫效果

2020/02/06

追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News