Loading 動畫是前端體驗的微交互關鍵。本教學展示如何在 PS 中以「直線旋轉複製 → 圓角矩形斜切變形 → 中心點偏移旋轉複製 → 圖層樣式賦質感 → 群組旋轉複製 → 幀動畫逐幀顯示」流程，純幾何圖形產出極具設計感的旋轉載入動畫，並導出 GIF/WebP 供網頁直接使用。

基礎幾何構建：直線陣列與圓角矩形變體

100×100px 畫布，背景 #2d2d2d。直線工具畫 1px 白豎線，水平置中。Ctrl+T 旋轉 45°。Ctrl+Alt+Shift+T 重複變換複製，形成 8 根輻射線。圓角矩形工具（半徑 1px）畫小葉片，參考線輔助置中。Ctrl+T 變形 → 右鍵「斜切」調整左右底點 → 移動中心點至畫布中心 → Ctrl+Alt+Shift+T 旋轉複製成環形葉片陣列。

圖層樣式賦質感：內陰影、斜面、外發光

為葉片圖層添加樣式：
• **內陰影**：距離 0、大小 3、顏色 #242424，壓陷邊緣。
• **斜面與浮雕**：內部斜面、平滑、深度 100%、大小 3px、高光/陰影調整。
• **外發光**：模式「正片疊底」、顏色 #00ffcc、大小 5px，邊緣微光。
複製葉片組，刪除部分葉片形成缺口（刪除錨點工具），調整樣式參數（如外發光顏色/大小），製作 4 組差異葉片組（shape、shape1、shape2、shape3）。

群組旋轉與幀動畫

將 5 個圖層（輻射線 + 4 組葉片）編組（Ctrl+G）。複製組 → Ctrl+T 旋轉 45° → 重複得 8 組（每組旋轉 45° 遞增）。開啟時間軸面板（幀動畫模式），第一幀 0s、循環永遠。隱藏所有組僅顯示背景。新建幀，顯示第 1 組；新幀顯示第 2 組……以此類推共 8 幀。也可在相鄰幀間添加過渡幀平滑旋轉。預覽滿意後【檔案 > 存儲為 Web 所用格式】輸出 GIF，或導出視頻轉 WebP/APNG 供現代網頁使用。

進階優化：**用智能物件封裝單葉片**，修改智能物件內容即可全局更新所有葉片；**用動作記錄「旋轉複製」步驟**，一鍵生成 8 組；**導出時勾選「元數據：無」、顏色 128 色、抖動 88%**，平衡體積與畫質。此幾何動畫風格極適合科技感、極簡風品牌，且矢量源文件可無損縮放適配 Retina 屏。