利用形狀補間與遮罩層，製作雙向推拉式圖片切換效果

本教學示範如何結合「形狀補間」與「遮罩層」，以兩條相對移動的直線作為遮罩動畫，實現圖片從左至右、右至左交替推出的切換轉場。

效果預覽

製作步驟

1. 建立左向右遮罩動畫
   • 新增圖層「遮罩1」，第 1 幀繪製垂直線置於舞台左側。
   • 第 30 幀插入關鍵幀，將直線拖至舞台右側。
   • 任意幀右鍵選「建立形狀補間」。
     
2. 建立右向左遮罩動畫
   • 新增圖層「遮罩2」，第 1 幀繪製垂直線置於舞台右側。
   • 第 30 幀插入關鍵幀，移至舞台左側，同樣套用形狀補間。
     
3. 放置第一張圖片
   • 新增圖層「圖片1」，匯入圖片填滿舞台。
     
4. 放置第二張圖片（延遲出現）
   • 新增圖層「圖片2」，第 20 幀插入關鍵幀並匯入第二張圖片，第 30 幀插入普通幀。
     
5. 建立矩形遮罩擴展動畫
   • 新增圖層「遮罩擴展」，第 20 幀插入關鍵幀，繪製矩形與兩條直線對齊。
   • 第 30 幀插入關鍵幀，使用自由變形工具將矩形放大至覆蓋全舞台，套用形狀補間。
     
6. 設定遮罩層關係
   • 右鍵點擊「遮罩擴展」圖層，選擇「遮罩」，其下方的「圖片2」自動成為被遮罩層。
     

關鍵要點

• 兩條直線遮罩方向相反，形成「雙門開合」視覺張力。
• 矩形擴展動畫需與直線位置精確對齊，否則會出現縫隙。
• 圖片 2 於第 20 幀才出現，配合遮罩擴展時機，實現無縫切換。
• 此為基礎範例，實際專案中可替換為任意形狀、路徑的遮罩動畫，發揮創意。

測試發布

按 Ctrl+Enter 預覽，若動畫流暢即完成。可進一步調整幀數、緩動曲線優化節奏。