專案概覽

遊戲圖標不再是靜態圖片，**動態圖標**能顯著提升點擊率與品牌記憶。本教程演示 **AI 矢量繪製 → AE 動效製作 → Bodymovin/Lottie 輸出** 全流程，產出一款「魔法瓶」主題的動態遊戲圖標：瓶身發光脈動、瓶塞彈跳、魔法粒子環繞、液體晃動，最終輸出 <50KB 的 .json 動畫，可直接嵌入 Unity/Cocos/網頁/App。

一、AI 矢量繪製：分層備動

1. 新建 512×512 px AI 文檔，RGB、72ppi。
2. 圖層結構規劃（自下而上）：
   Background（底色圓）
   Bottle_Body（瓶身主體、漸變網格上色）
   Bottle_Neck（瓶頸）
   Cork（瓶塞、獨立圖層）
   Liquid（瓶內液體、剪貼蒙版在瓶身內）
   Glow_Ring（瓶頸發光環）
   Particles（魔法粒子群、每顆獨立子圖層）
   Label（標籤貼紙）
   Highlight/Shadow（高光陰影修飾層）
3. 所有可動部件（Cork, Liquid, Glow_Ring, Particles 各子層）**必須為獨立頂級圖層**，命名規範（無中文、無空格、下劃線分隔），便於 AE 識別。
4. 存檔為 magic_bottle.ai。

二、AE 導入與合成設置

1. AE 新建合成：512×512、30fps、時長 3 秒（循環）、背景透明。
2. 導入 AI 文件：導入類型選「合成 - 保留圖層大小」，圖層大小選「文檔大小」。
3. 打開生成的合成，檢查圖層結構是否完整，將所有矢量圖層啟用「連續光柵化」（太陽圖標），保證縮放不銳銳。

三、核心動效製作

1. 瓶塞彈跳

選中 Cork 圖層，P 打開位置，Alt+Click 秒錶輸入表達式：
freq = 1.5; amp = 15; decay = 3; t = time - inPoint; y = amp * Math.sin(freq * t * 2 * Math.PI) / Math.exp(decay * t); value + [0, y]
調整 freq/amp/decay 至手感自然。添加「彈性」關鍵幀動畫亦可（易於控制）。

2. 液體晃動

Liquid 圖層 → 效果 → 扭曲 → **波紋扭曲**：波高 5、波寬 100、方向 0、波速 0.5、釘住邊緣「上」。
或用 **CC Bend It** 效果：彎曲角度關鍵幀動畫 -15°→15°→-15°，循環。

3. 發光環脈動

Glow_Ring 圖層 → 效果 → 風格化 → **光暈**：光暈半徑關鍵幀 20→40→20，光暈亮度 0.5→1→0.5，顏色漸變 #FFD700→#FFA500。混合模式「螢幕」。

4. 魔法粒子環繞

Particles 子圖層各自添加 **CC Particle World** 或手動關鍵幀：
位置：圓周運動表達式 r=80; a=time*360*deg2rad; [r*Math.cos(a), r*Math.sin(a)]
不透明度：0→100→0（淡入淡出）
縮放：50%→100%→50%
顏色：隨機 HSL 表達式 hue = random(30,60); saturation=100; lightness=70
延遲各粒子起始時間（索引 * 0.1s）形成連續流動感。

四、動效微調與循環無縫

• 啟用「運動模糊」圖層開關與合成開關，增加動態真實感。
• 調整所有關鍵幀曲線為「Easy Ease」（F9），圖形編輯器調整速度曲線為平滑 S 型。
• 確保首尾幀數值完全一致（位置、縮放、旋轉、不透明度、效果參數），實現無縫循環。

五、Lottie/Bodymovin 輸出與引擎接入

1. 安裝 Bodymovin 擴展（ZXP 安裝或 UXP 面板）。
2. 選中合成 → Bodymovin 面板 → 「Render」→ 輸出 magic_bottle.json。
3. 檢查檔案大小 <50KB（超過則簡化路徑、減少粒子數、降低幀率至 20fps）。
4. 引擎接入：
   Web: lottie-web
   iOS: Lottie-ios
   Android: Lottie-android
   Unity: Lottie-Unity (Asset Store)
   Flutter: lottie_flutter

六、效能優化清單

指標	目標	優化手段
文件大小	< 50 KB	簡化路徑點數、合併同色形狀、減少漸變網格點、降低幀率
解析度獨立	任意縮放不失真	純矢量圖層、無位圖素材、啟用連續光柵化
運行幀率	60fps 穩定	避免複雜遮罩、濾鏡、表達式過度計算、GPU 友好屬性
記憶體佔用	< 5 MB	無大尺寸位圖、精簡 JSON 結構