效果預覽

兩條垂直線從左右向中間/外側移動，中間矩形同步展開/收合，像窗簾一樣切換兩張圖片。核心：**形狀補間** + **遮罩層** + **多圖層疊加**。

圖層架構與關鍵幀設計

圖層	內容	關鍵幀動畫
1	左線條（左→右）	第 1 幀：左側 → 第 30 幀：右側，形狀補間
2	右線條（右→左）	第 1 幀：右側 → 第 30 幀：左側，形狀補間
3	圖片 A（背景）	第 1 幀放置，第 30 幀插入一般幀
4	圖片 B（前景）	第 20 幀關鍵幀放置，第 30 幀一般幀
5	矩形遮罩（中間展開）	第 20 幀：窄條對齊雙線 → 第 30 幀：展開滿舞台，形狀補間
6	（遮罩層設定）	圖層 5 設為遮罩，遮罩圖層 4

詳細步驟

步驟 1-2：雙向線條動畫

1. 圖層 1：線條工具畫垂直線放左側 → 第 30 幀 F6 → 拖到右側 → 屬性面板補間選「形狀」
2. 圖層 2：同理畫線放右側 → 第 30 幀拖到左側 → 形狀補間

步驟 3-4：兩張圖片疊放

1. 圖層 3（底）：第 1 幀拖入圖片 A，對齊舞台，第 30 幀 F5
2. 圖層 4（頂）：第 20 幀 F6 拖入圖片 B，對齊舞台，第 30 幀 F5

步驟 5-6：矩形遮罩 + 遮罩層設定

1. 圖層 5：第 20 幀 F6，矩形工具畫窄矩形，**左右邊緣精確對齊兩條線條**
2. 第 30 幀 F6，自由變形拉大矩形覆蓋全舞台
3. 20→30 幀建立形狀補間
4. 右鍵圖層 5 名稱 → 選「遮罩」
5. 圖層 5 變遮罩圖示，圖層 4 縮進被遮罩

原理解析

• 第 1-19 幀：只有圖片 A 可見（圖層 4 尚未開始）
• 第 20 幀：圖片 B 出現，但被窄矩形遮罩，只露一線
• 第 20-30 幀：矩形形狀補間展開，兩側線條向中間/外側移動，圖片 B 逐漸完整顯示，像窗簾打開
• 第 30 幀後：圖片 B 完整顯示，圖片 A 被完全遮蓋

關鍵成功因素

1. 線條與矩形邊緣精確對齊： 任何像素偏移都會產生縫隙/重疊瑕疵
2. 形狀補間而非動作補間： 線條和矩形是「形狀」，必須用形狀補間
3. 圖層順序正確： 遮罩層(5)在被遮罩層(4)正上方
4. 圖片 B 從第 20 幀才出現： 配合矩形展開時機，避免過早露餡

變化與延伸

• 水平窗簾： 橫線上下移動、矩形上下展開
• 對角線/圓形/不規則形狀： 同理，形狀補間控制遮罩形狀變化
• 多圖片輪播： 疊加多組「圖片+遮罩」組，AS 控制時序切換
• 3D 翻轉感： 矩形加入 3D 旋轉變形（CS4+），配合漸層光影
• 文字遮罩： 遮罩形狀換成文字輪廓，圖片在文字內顯現

常見問題

問題	原因	解決
遮罩不生效	圖層順序錯/未設遮罩/被遮罩層非緊鄰下層	檢查圖層面板圖示、右鍵確認遮罩關係
形狀補間失效/亂變	對象非原始形狀（是群組/元件）	確認圖層鎖定圖示顯示為形狀圖示、必要時打散
邊緣有鋸齒/縫隙	對齊不精確/線條過細	放大 400% 對齊、線條稍粗(2-3px)、補間微調
圖片 B 一直顯示	未設遮罩/遮罩形狀未覆蓋	確認第 20 幀矩形窄、第 30 幀矩形滿舞台