Animate CC 照片放大鏡效果動畫
閱讀時間約 1 分鐘
Step1.
元件庫中包含放大鏡與鏡片元件。暫時隱藏放大鏡圖層，在鏡片遮色片圖層上插入多個關鍵影格，並依序移動遮色片元件於場景上不同位置，建立傳統補間動畫，讓鏡片遮色片於清楚照片上移動。
元件庫中包含放大鏡與鏡片元件。暫時隱藏放大鏡圖層，在鏡片遮色片圖層上插入多個關鍵影格，並依序移動遮色片元件於場景上不同位置，建立傳統補間動畫，讓鏡片遮色片於清楚照片上移動。
Step2.
顯示放大鏡圖層，同樣依遮色片圖層關鍵影格建立關鍵影格，並確認每個關鍵影格上的放大鏡對齊遮色片元件，同樣建立傳統補間。
顯示放大鏡圖層，同樣依遮色片圖層關鍵影格建立關鍵影格，並確認每個關鍵影格上的放大鏡對齊遮色片元件，同樣建立傳統補間。
Step 3.
最後設定遮色片圖層的遮色片功能，遮色片控制清楚相片顯示，搭配放大鏡物件的移動，完成相片呈現效果範例。
最後設定遮色片圖層的遮色片功能，遮色片控制清楚相片顯示，搭配放大鏡物件的移動，完成相片呈現效果範例。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
為什麼會看到廣告
29會員
161內容數
藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站，以及安裝和放置遊戲中的簡易流程。
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法，藉由連結程式腳本和動畫編輯器，讓動畫更靈活的運作。
這篇文章將會講述 Animation 在設定後要如何使用程式觸發，並不介紹直接使用的 Animation，並簡易提到 Animator 的連結教學。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
這篇文章將會講述 Animator 中 Play 和 Transition 的差異和特色。
這篇文章將會介紹一個 Unity 3D 的人物角色和動畫的網站，以及安裝和放置遊戲中的簡易流程。
這篇文章將會介紹 Unity Animatior Edit 參數控制的方法，藉由連結程式腳本和動畫編輯器，讓動畫更靈活的運作。
這篇文章將會講述 Animation 在設定後要如何使用程式觸發，並不介紹直接使用的 Animation，並簡易提到 Animator 的連結教學。