效果預覽

網頁載入時的旋轉等待動畫是提升用戶體驗的關鍵微互動元素。本教程使用 Photoshop CS5 純圖層樣式與時間軸動畫，無需腳本即可製作出流暢的 Loading 環狀動畫。

核心技術點

• 路徑描邊建立精確圓環
• 填充 0% + 圖層樣式「漸變疊加」創建透明圓環
• 漸變編輯器配置雙色透明度節點產生「掃光」視覺
• 時間軸關鍵幀旋轉漸變角度實現動畫

詳細製作步驟

第一階段：建立基礎圓環結構

1. 新建文件：200×200 px，透明背景
2. 繪製圓形路徑：選取橢圓工具（U），按住 Shift 畫正圓路徑，新建圖層 1

3. 路徑描邊：切換至「路徑」面板，右鍵路徑選「描邊路徑」，工具選「畫筆」，預設 3px 硬邊圓筆，點擊路徑面板空白處隱藏路徑

4. 關鍵：填充歸零：回到圖層面板，將圖層 1「填充」設為 0% —— 圖層可見內容消失，但「形狀」與「圖層樣式」保留

第二階段：配置漸變疊加樣式產生掃光效果

5. 添加漸變疊加：圖層 1 右鍵 → 混合選項 → 勾選「漸變疊加」

6. 編輯漸變編輯器：點擊漸變色條進入編輯器，關鍵配置：

• 下方色標（顏色）：左 #007aff（藍）→ 右 #00d4ff（青）
• 上方色標（透明度）：左 0% → 中間 100% → 右 0%，形成「中間亮、兩邊透明」的掃光帶
• 將中間兩個透明度色標拉近（位置約 45% / 55%），掃光帶變窄更明顯

7. 漸變疊加參數：樣式「線性」、角度 90°、縮放 100%、混合模式「正常」、不透明度 100%

第三階段：時間軸關鍵幀動畫

8. 開啟時間軸：視窗 → 時間軸 → 「建立影格動畫」
9. 建立 3 個關鍵幀：
   • 幀 1：漸變角度 90°（初始狀態）
   • 幀 2：複製幀 1 → 雙擊圖層樣式 → 漸變角度改 -90°
   • 幀 3：複製幀 2 → 漸變角度改回 90°

10. 添加補間幀：
    • 選中幀 1 → 補間 → 新增 18 幀（幀數越多轉動越慢，建議 15-20）
    • 選中倒數第 2 幀 → 補間 → 新增 18 幀

11. 刪除重複尾幀：刪除最後一幀（與第 1 幀相同），避免循環停頓
12. 預覽與匯出：點擊播放預覽，Ctrl+Alt+Shift+S 存儲為 Web 格式（GIF、永遠循環、256 色）

進階優化技巧

多色相位 Loading

複製圖層 1 為圖層 2，漸變色改為暖色系（紅→橙），角度偏移 120°；再複製圖層 3 改為綠色系，偏移 240°。三層疊加形成 RGB 三色旋轉效果。

脈衝呼吸效果

在關鍵幀中同步調整「外發光」樣式的大小與不透明度，配合旋轉產生呼吸感。

導出為 APNG/WebP

現代專案建議匯出 APNG（支援 24 位色彩+Alpha 透明）或 WebP 動畫，檔案更小、品質更高。PS 2023+ 原生支援，舊版可用外掛或線上轉換工具。

參數速查表

參數	建議值	影響
畫布尺寸	64×64 / 128×128 px	適配 Retina 螢幕建議 2x/3x
圓環線寬	3-5 px	太細不顯眼，太粗失去輕盈感
掃光帶寬度	透明度色標間距 10-15%	越窄越銳利，越寬越柔和
補間幀數	15-25 幀/圈	15 幀約 0.6 秒/圈，25 幀約 1 秒/圈
循環模式	永遠	網頁 Loading 必須無限循環