利用 Photoshop 時間軸功能即可製作無需 After Effects 的輕量級幾何動畫。本教程以菱形旋轉為例，詳細拆解形狀構建、智能對象轉換、關鍵幀屬性動畫、顏色疊加過渡等核心技巧，適合 UI 載入圖標、Banner 動效、微課件製作。

基礎幾何構建與圖層架構

1. 形狀工具繪製正方形，刪除一個錨點轉為直角三角形。
2. 複製四個三角形拼合菱形，依序填充同色相由淺至深漸變色（如 #FFF3E0 → #FFE0B2 → #FFCC80 → #FFB74D）。
3. 圖層命名：1、2、3、4（靜態底圖），複製 1、2 命名 11、22（動畫主體），右鍵轉為「智能對象」保護原始向量。

時間軸面板與關鍵幀邏輯

1. 「視窗」→「時間軸」，點擊「建立視頻時間軸」。
2. 展開 11、22 圖層三角形，啟用「變換」與「圖層樣式」秒表（關鍵幀）。
3. 工作區時長設 2 秒，幀率 30fps。

三階段關鍵幀動畫設計

第 1 階段（0s~0.5s）：初始狀態
時間滑塊移至 0.5s，對 11、22 添加「變換」與「樣式」關鍵幀（菱形按鈕）。

第 2 階段（0.5s~1s）：斜切變形 + 色相過渡
• 11 圖層：Ctrl+T 自由變換，按住 Ctrl+Shift 拖動底部中點向右斜切至菱形中心。
• 22 圖層：對稱向左斜切。
• 兩圖層添加「顏色疊加」樣式：11 取圖層 3 顏色、22 取圖層 4 顏色，不透明度 50%。

第 3 階段（1s~1.5s）：復位與完全顯色
時間滑塊移至 1.5s，再次添加關鍵幀。
• 11、22 變形回原三角形位置。
• 「顏色疊加」不透明度改 100%，完成色塊遞補動畫。

預覽與導出優化

1. 播放模式設「循環播放」，空白鍵預覽動畫流暢度。
2. 「檔案」→「導出」→「存儲為 Web 所用格式」，選 GIF、循環選「永遠」、顏色 256、抖動 88%，平衡體積與質量。
3. 進階：導出 MP4 供影片嵌入，或導出 JSON 配合 Lottie/Web 前端渲染。