2020-02-06|閱讀時間 ‧ 約 1 分鐘

Animate CC 照片放大鏡效果動畫

檢視範例】【下載範例】 應用影片片段元件與傳統補間動畫來整合遮色片動畫,呈現照片上鏡片看圖的效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。
Step1. 元件庫中包含放大鏡與鏡片元件。暫時隱藏放大鏡圖層,在鏡片遮色片圖層上插入多個關鍵影格,並依序移動遮色片元件於場景上不同位置,建立傳統補間動畫,讓鏡片遮色片於清楚照片上移動。
Step2. 顯示放大鏡圖層,同樣依遮色片圖層關鍵影格建立關鍵影格,並確認每個關鍵影格上的放大鏡對齊遮色片元件,同樣建立傳統補間。
Step 3. 最後設定遮色片圖層的遮色片功能,遮色片控制清楚相片顯示,搭配放大鏡物件的移動,完成相片呈現效果範例。
相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果
分享至
成為作者繼續創作的動力吧!
藉由Animate CC製作網頁上的動畫,並發佈成HTML5+CANVAS+JAVASCRIPT格式,已是最有效率設計製作專業網頁動畫效果的方式,筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧,歡迎一起讓網頁上的內容動起來!
從 Google News 追蹤更多 vocus 的最新精選內容從 Google News 追蹤更多 vocus 的最新精選內容

發表回應

成為會員 後即可發表留言
© 2024 vocus All rights reserved.