善用「對齊面板」快速建立等間距矩陣，配合遮罩實現精美圖片過渡

本教學重點不在遮罩本身，而在於如何高效使用 對齊面板 快速生成規整的方塊矩陣，作為遮罩動畫單元，實現圖片塊狀過渡特效。

核心流程

1. 建立單元方塊動畫元件「方塊動畫」
   • 基礎元件「方塊」：正方形，漸變填充（左右白色透明度 0%/100%）。
   • 在「方塊動畫」中拖入「方塊」，用對齊面板「相對舞台」靠右下對齊（註冊點在左上）。
   • 關鍵幀時間軸設計（旋轉+縮放循環）：
     • 1幀：縮放 0%，旋轉 0°
     • 20幀：旋轉 45°，居中對齊
     • 35幀：關鍵幀
     • 55幀：旋轉 45°，靠右上對齊
     • 65幀：關鍵幀
     • 85幀：居中對齊
     • 95幀：關鍵幀
     • 105幀：等比放大
     • 120幀：逆時針旋轉 1 圈
     • 135幀：縮放 0%
     • 136幀：空白幀，時間軸延至 145 幀
   • 所有關鍵幀間套用「動作補間」，並設定旋轉方向（順/逆時針）與縮放 0% 起止。
     
2. 建立「方塊列」：水平等間距陣列
   • 新元件「方塊列」，拖入 6 個「方塊動畫」實例。
   • 全選，對齊面板取消「相對舞台」，點擊「水平分佈」→ 6 個方塊等間距排列同一水平線。
     
   • Ctrl+Shift+D 分散到各圖層。
   • 從倒數第二層開始，每層關鍵幀依次向後錯開 1、2、3... 幀，時間軸延長 6 幀。
   • 第 2 層關鍵幀加 stop()，控制播放時機。
     
3. 建立「方塊矩陣」：垂直等間距陣列
   • 新元件「方塊矩陣」，拖入 6 個「方塊列」實例。
   • 全選，對齊面板點擊「垂直分佈」→ 等間距排列同一垂直線。
     
4. 主場景合成
   • 圖層1：導入圖片 A。
   • 圖層2：拖入「方塊矩陣」，對齊覆蓋圖片 A。
   • 圖層3：複製圖層1 第 1 幀內容貼上（圖片 A 副本）。
   • 圖層2 設為遮罩層，圖層1 為被遮罩層 → 方塊動畫控制圖片 A 顯示。
     
   • 刪除「方塊動畫」中輔助用的圖層2（或設為引導層）。
     
5. 實現圖片過渡（A→B）
   • 主時間軸延長至 290 幀 (145×2)。
   • 圖層1 第 145 幀插入空白幀，導入圖片 B。
   • 所有圖層時間軸延長至 290 幀。原理：前 145 幀方塊動畫播放完畢（最後方塊縮放 0%），圖片 A 完全被遮罩隱藏；第 145 幀空白關鍵幀切換至圖片 B，後 145 幀方塊動畫反向/重播揭示圖片 B。

對齊面板精確控制間距公式

若需精確間距（如 10px），方塊寬 35px，6 個方塊：

最左方塊 x = 0
最右方塊 x = (間距×5) + (方塊寬×5) = 50 + 175 = 225
全選 → 對齊面板(相對舞台=關) → 水平分佈 → 間距精確 10px

延伸變化

• 修改「方塊動畫」內部補間曲線、形狀（圓形、三角、不規則碎片）、填充樣式。
• 調整矩陣行列數（對齊面板同樣適用）。
• CPU 警示：方塊形狀/填充過於複雜、矩陣數量過大 (如 20×20) 會嚴重拖慢渲染，建議單元簡單化、總數控制在 100 以內。

原文參考

ZOL 軟體下載站原文 (含後續頁面)