效果預覽

教學說明

本教學以圖文並茂形式，展示閃爍愛心 GIF 動畫的逐幀構建過程。由於原教程以連續截圖呈現每幀操作，此處整理為標準化流程，供參考學習幀動畫製作邏輯。

製作流程重構

第一階段：靜態愛心基礎構建

1. 新建文件（建議 200×200px，透明背景）。
2. 自定義形狀工具（U）選「愛心」形狀，按 Shift 拉出正比例愛心向量圖層，填充紅色 #ff0000 或漸層。
3. 添加圖層樣式：倒角與浮雕 (內倒角、深度 200%、大小 10px、光澤輪廓環形) → 外發光 (#ff6699、大小 15px) → 投影 (距離 3px、大小 5px)，建立立體質感基礎。

第二階段：閃爍動畫幀序列設計

核心邏輯：建立多個愛心狀態圖層（大小、亮度、顏色、特效變化），動畫面板逐幀顯示對應圖層。

1. 複製愛心圖層 8-12 份，分別命名「幀 1」至「幀 N」。
2. 對每個圖層進行差異化調整：
   • 縮放變化：Ctrl+T 縮放 90%-110% 之間，製造呼吸感。
   • 亮度/不透明度：圖層不透明度 50%-100% 交替，或添加亮度/對比調整圖層剪貼蒙版。
   • 外發光強度：雙擊圖層樣式修改外發光大小/不透明度，模擬脈動光暈。
   • 顏色變化：色相/飽和度調整圖層剪貼，色相微調 ±10° 產生色相位移閃爍。
   • 粒子/光點：新建圖層散佈微小白色光點，配合愛心閃爍節奏顯隱。

第三階段：動畫面板組幀

1. 開啟動畫面板（時間軸 → 轉換為影格動畫）。
2. 第 1 幀：只顯示「幀 1」圖層 + 背景。
3. 點擊「複製選定幀」，第 2 幀顯示「幀 2」……以此類推，直到所有狀態圖層各對應一幀。
4. 全選幀，設定延遲 0.08-0.15 秒（視閃爍速度），循環「永遠」。
5. 預覽調整順序/時長，確保循環無明顯跳變。

第四階段：導出優化

1. 檔案 > 存儲為 Web 所用格式，GIF 格式。
2. 色板：256 色（含透明），抖動：擴散 88%。
3. 優化：勾選「間隔掃描」（隔行掃描）可減小檔案體積。
4. 儲存為 heart_beat.gif。

原教程截圖參考

以下為原教程逐步操作截圖序列，可對應上述流程理解細節：

延伸創意

• 心跳節奏：參考心電圖波形設計幀序列：收縮(小/亮) → 舒張(大/暗) → 靜止 → 循環。
• 破碎重組：愛心破碎為粒子 → 粒子聚合重組 → 閃爍，敘事性更強。
• 文字同步：配合「LOVE」「FOREVER」等文字逐字顯示/閃爍。
• 互動式：導出為 Lottie JSON (需 Bodymovin/AE) 嵌入網頁，滑鼠懸停觸發播放。