Animate CC 照片放大鏡效果動畫

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

2025/02/05 更新2020/02/06 發佈閱讀 1 分鐘

vocus｜新世代的創作平台

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

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

vocus｜新世代的創作平台

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

vocus｜新世代的創作平台

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

vocus｜新世代的創作平台

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

#遮色片動畫

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

留言

哩老師的沙龍

30會員

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 線條人物側面跑步動畫

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

你可能也想看

趙鐸的沙龍

《轉轉生 Re:INCARNATION》：釋放差異的身體裂縫

長期以來，西方美學以《維特魯威人》式的幾何比例定義「完美身體」，這種視覺標準無形中成為殖民擴張與種族分類的暴力工具。本文透過分析奈及利亞編舞家庫德斯．奧尼奎庫的舞作《轉轉生》，探討當代非洲舞蹈如何跳脫「標本式」的文化觀看。

#2026北藝嚴選#北藝嚴選#臺北表演藝術中心

2026/02/28

趙鐸的沙龍

《轉轉生 Re:INCARNATION》：釋放差異的身體裂縫

長期以來，西方美學以《維特魯威人》式的幾何比例定義「完美身體」，這種視覺標準無形中成為殖民擴張與種族分類的暴力工具。本文透過分析奈及利亞編舞家庫德斯．奧尼奎庫的舞作《轉轉生》，探討當代非洲舞蹈如何跳脫「標本式」的文化觀看。

#2026北藝嚴選#北藝嚴選#臺北表演藝術中心

2026/02/28

哩老師的沙龍

Animate CC 按鈕與動畫互動切換

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

#javaScript互動

2020/02/15

哩老師的沙龍

Animate CC 按鈕與動畫互動切換

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

#javaScript互動

2020/02/15

哩老師的沙龍

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

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

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

2020/02/18

哩老師的沙龍

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

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

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

2020/02/18

哩老師的沙龍

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

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

#遮色片動畫

2020/02/07

哩老師的沙龍

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

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

#遮色片動畫

2020/02/07

哩老師的沙龍

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

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

#遮色片動畫

2020/02/07

哩老師的沙龍

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

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

#遮色片動畫

2020/02/07

在理解與拒絕之間：從多重身分觀看《海妲．蓋柏樂》

若說易卜生的《玩偶之家》為 19 世紀的女性，開啟了一扇離家的窄門，那麼《海妲．蓋柏樂》展現的便是門後的窒息世界。本篇文章由劇場演員 Amily 執筆，同為熟稔文本的演員，亦是深刻體察制度縫隙的當代女性，此文所看見的不僅僅是崩壞前夕的最後發聲，更是女人被迫置於冷酷的制度之下，步步陷入無以言說的困境。

#2026北藝嚴選#北藝嚴選#臺北表演藝術中心

2026/02/28

在理解與拒絕之間：從多重身分觀看《海妲．蓋柏樂》

若說易卜生的《玩偶之家》為 19 世紀的女性，開啟了一扇離家的窄門，那麼《海妲．蓋柏樂》展現的便是門後的窒息世界。本篇文章由劇場演員 Amily 執筆，同為熟稔文本的演員，亦是深刻體察制度縫隙的當代女性，此文所看見的不僅僅是崩壞前夕的最後發聲，更是女人被迫置於冷酷的制度之下，步步陷入無以言說的困境。

#2026北藝嚴選#北藝嚴選#臺北表演藝術中心

2026/02/28

哩老師的沙龍

Animate CC 遮色片細膩繪圖動畫

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

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

2020/02/07

哩老師的沙龍

Animate CC 遮色片細膩繪圖動畫

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

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

2020/02/07

哩老師的沙龍

Animate CC Q版照片人物動畫

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

2020/02/13

哩老師的沙龍

Animate CC Q版照片人物動畫

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

2020/02/13

釀電影，啜一口電影的美好。

《傳奇：帕拉贊諾夫的十段殘篇》：一場跨越時空的藝術對話，在舞臺上重現自由靈魂

本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇：帕拉贊諾夫的十段殘篇》，如何以十段殘篇，結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭，探討藝術在儀式消失的現代社會如何承接意義，並展現不羈的自由靈魂。

#釀電影#釀評論#藝術評論

2026/02/11

釀電影，啜一口電影的美好。

《傳奇：帕拉贊諾夫的十段殘篇》：一場跨越時空的藝術對話，在舞臺上重現自由靈魂

本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇：帕拉贊諾夫的十段殘篇》，如何以十段殘篇，結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭，探討藝術在儀式消失的現代社會如何承接意義，並展現不羈的自由靈魂。

#釀電影#釀評論#藝術評論

2026/02/11

哩老師的沙龍

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

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

#遮色片動畫

2020/02/07

哩老師的沙龍

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

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

#遮色片動畫

2020/02/07

釀電影，啜一口電影的美好。

吃完飯後再談道德，除魅之後再復魅：巴里．柯斯基與柏林劇團的《三便士歌劇》

全新版本的《三便士歌劇》如何不落入「復刻經典」的巢臼，反而利用華麗的秀場視覺，引導觀眾在晚期資本主義的消費愉悅之中，而能驚覺「批判」本身亦可能被收編——而當絞繩升起，這場關於如何生存的黑色遊戲，又將帶領新時代的我們走向何種後現代的自我解構？

#2026北藝嚴選#BarrieKosky#BerlinerEnsemble

2026/03/10

釀電影，啜一口電影的美好。

吃完飯後再談道德，除魅之後再復魅：巴里．柯斯基與柏林劇團的《三便士歌劇》

全新版本的《三便士歌劇》如何不落入「復刻經典」的巢臼，反而利用華麗的秀場視覺，引導觀眾在晚期資本主義的消費愉悅之中，而能驚覺「批判」本身亦可能被收編——而當絞繩升起，這場關於如何生存的黑色遊戲，又將帶領新時代的我們走向何種後現代的自我解構？

#2026北藝嚴選#BarrieKosky#BerlinerEnsemble

2026/03/10

哩老師的沙龍

Animate CC 遮色片光澤效果動畫

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

#遮色片動畫

2020/02/07

哩老師的沙龍

Animate CC 遮色片光澤效果動畫

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

#遮色片動畫

2020/02/07

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