漸變光掃是經典的 Web 加載提示、頁面過渡、按鈕懸停動效。本教程演示如何在 Photoshop 中利用漸變工具透明度控制+圖層混合模式「溶解」+時間軸幀動畫，快速生成一條從左向右掃過的白色漸變光帶 GIF 動畫。流程極短、邏輯清晰，適合 UI 設計師、前端工程師快速產出原型動效素材，也適合初學者理解「幀動畫邏輯與導出」基本功。

效果預覽

核心邏輯：三層結構 + 兩幀位移

圖層	內容	關鍵設置	作用
背景層	任意背景圖/純色	—	承載光掃掠過的底圖
光掃層 (Layer 1)	白→透明線性漸變條	混合模式溶解；初始位置在畫布左側外	核心動畫元素，「溶解」模式製造顆粒感光暈
白色遮罩層 (Layer 2)	純白填充	置於光掃層之上	配合光掃層移動，控制光掃「進場/退場」的硬邊界

分步操作指南

階段一：製作靜態光掃素材

1. 打開背景圖（或新建填充背景）。
2. 新建圖層 1，選漸變工具 (G)，編輯器中設：
   — 漸變類型：線性（第一個圖標）
   — 顏色停點：左/右均為白色
   — 不透明度停點：左 100%、右 0% → 形成「白→透」漸變條。
3. 按 Shift 拖曳從右向左拉出一條橫貫畫布的漸變條（長度自定）。
4. 將圖層 1 混合模式改為溶解 → 邊緣呈現顆粒狀消失，更具「光粒子」質感。
5. 用移動工具 (V) 將圖層 1 整體移至畫布左側外緣剛好隱形位置（準備進場）。

階段二：建立白色遮罩層

1. 新建圖層 2，填充純白（Alt+Delete）。
2. 確保圖層順序：背景層 → 光掃層(1) → 白色遮罩層(2)。

階段三：時間軸幀動畫製作

1. 打開窗口→時間軸，選「創建幀動畫」。
2. 第 1 幀：選中圖層 1、2，位置均在左側外（光掃未進場）。
3. 點擊複製選中幀 → 得到第 2 幀。
4. 第 2 幀：選中圖層 1、2，整體移動至畫布右側外緣（光掃掃過並退場）。
5. 選中第 1 幀，點擊添加補間幀圖標，設補間幀數 5-10（越多越平滑），確定。
6. 選中最後一幀，設延遲 1 秒（停留觀察），其餘幀 0.1-0.2 秒。
7. 播放模式選永久，點播放預覽。

階段四：導出 GIF/MP4

• GIF：文件→存儲為 Web 所用格式 (Alt+Shift+Ctrl+S) → 格式 GIF → 循環選項「永久」 → 存儲。
• MP4 (CC 版本)：文件→導出→渲染視頻 → 格式 H.264 → 渲染。

進階變體與實戰應用

• 多色光掃：漸變編輯器中設多色停點（如藍→紫→粉），混合模式改篩選/線性減淡，適配深色背景。
• 徑向/角度光掃：漸變類型選「徑向/角度」，配合極座標濾鏤製造環狀/旋轉掃描效果。
• 按鈕懸停態：僅導出「光掃掠過按鈕寬度」的短動畫，CSS 中用background-position或mask-position實現 hover 觸發，性能極佳。
• 頁面過渡遮罩：將光掃層做成全屏寬，配合 CSS clip-path 實現頁面切換「光掃揭示」效果。
• 批量生成：錄製動作，配合批次處理，一鍵產出不同寬度/顏色/速度的光掃素材庫。

技法本質總結

本教程展示了「靜態素材準備 → 圖層狀態定義關鍵幀 → 補間幀自動插值 → 導出」的 Photoshop 幀動畫標準範式。同理可構建：

• 進度條動畫：矩形圖層寬度關鍵幀 0%→100%。
• 骨架屏閃爍：灰色塊圖層不透明度關鍵幀 0.4↔1 循環。
• 彈跳圖標：位置關鍵幀 Y 軸抛物線軌跡 + 縮放關鍵幀壓扁/拉伸。

掌握這套最小閉環，你就能在無代碼環境下，用 Photoshop 快速產出高保真動效原型、交互演示視頻、開發參考素材，極大縮短「設計→開發」溝通成本。