本教程將示範如何從靜態蝴蝶素材出發，通過路徑動畫、關鍵幀設定、翅膀扇動模擬，製作出輕盈飛舞的蝴蝶 GIF 動畫，適合網頁裝飾、Banner 動態元素、數位簽名檔製作。

最終動態效果

製作流程記錄

教程以詳細步驟圖記錄了從素材處理、翅膀分層、路徑規劃、幀動畫建立到最終輸出的完整過程：

核心技法解析

1. 翅膀分層：將蝴蝶素材拆分為「身體」「左翅」「右翅」三圖層，翅膀錨點置於連接身體處
2. 飛行路徑規劃：鋼筆工具繪製曲線路徑作為飛行軌跡
3. 翅膀扇動動畫：
   • 關鍵幀 1：翅膀合攏（旋轉 -15°）
   • 關鍵幀 2：翅膀展開（旋轉 +15°）
   • 添加過渡幀平滑旋轉
   • 設置循環播放
4. 位移動畫：身體圖層沿路徑關鍵幀位移（或使用「路徑動畫」功能）
5. 綜合輸出：合成翅膀扇動 + 身體位移 + 可選背景視差，輸出 GIF

動畫原理延伸

• 翅膀頻率：蝴蝶約 5-10Hz，對應幀率 10-20fps，每 1-2 幀切換一次翅膀狀態
• 路徑平滑：貝塞爾曲線控制點少而精，避免尖銳轉彎
• 視差深度：前景蝴蝶移動速度 > 背景元素，增強空間感

同邏輯可製作鳥飛、落葉飄落、魚游等生物動態，核心在於部件分層 + 週期性形變 + 路徑位移三要素組合。