蘋果發布新版Siri交互界面，其標誌性的多彩光環波動動效極具辨識度。本教程將拆解該動效的核心視覺邏輯，引導你在Photoshop中通過幀動畫/時間軸面板，結合形狀圖層、濾鏡動畫、蒙版動畫，逐幀還原這一極具科技美感的動態光環。雖然PS非專業動效工具，但掌握其幀動畫能力，足以產出高質量原型演示與UI動效標註圖。

效果預覽

視覺邏輯拆解

Siri光環動效可抽象為三層疊加系統：

1. 基底光環：多漸變色環(藍→紫→粉→橙→紅)，持續緩慢旋轉(週期 8-10s)；
2. 聲波驅動波動：頻譜數據驅動光環半徑/寬度/不透明度的實時波動，聲音越大波動幅度越大；
3. 微觀顆粒流體：光環內外緣的粒子狀流體擴散/收縮，增加有機生命感。

Photoshop幀動畫製作流程

階段一：靜態構圖佈局(靜態圖層結構)

1. 新建 800×800px、72dpi、RGB、背景透明文件；
2. 背景層：深灰/近黑 #121212 填充；
3. 基底光環組：
   • 橢圓工具按 Shift 畫正圓路徑，描邊 8px，填充無；
   • 圖層樣式→漸變疊加：角度型漸變，色標按順序 #007AFF(藍) → #AF52DE(紫) → #FF2D92(粉) → #FF9500(橙) → #FF3B30(紅) → 回到 #007AFF，形成閉環；
   • 圖層轉智能對象，命名「BaseRing」。
4. 波動變形組：複製 BaseRing 3 份，分別命名 Ring_Wave1/2/3，每層添加「濾鏡→扭曲→波浪」智能濾鏡，參數差異化(波數/波長/幅度)；
5. 粒子層：新建圖層，筆刷工具(自製粒子筆刷：散佈 1000%, 大小抖動 100%)，前景色取光環漸變色，點綴光環內外緣，模式「線性減淡」，命名「Particles」。

階段二：時間軸幀動畫製作(核心)

1. 窗口→時間軸→創建幀動畫(非視頻時間軸)；
2. 設置幀率：12fps(流暢且文件較小)或 24fps(更絲滑)；總幀數：96幀(8秒@12fps)或 192幀(8秒@24fps)；
3. 基底旋轉動畫：
   • 選中 BaseRing 智能對象，第1幀記錄旋轉 0°(編輯→自由變換→旋轉)；
   • 最後一幀(第96/192幀)記錄旋轉 360°；
   • 選中兩鍵幀→右鍵→補間→添加 94/190 幀 → 線性插值；
4. 波動呼吸動畫：
   • Ring_Wave1/2/3 各自設置波浪濾鏡參數關鍵幀：第1幀振幅 0 → 第24幀振幅最大 → 第48幀振幅 0 → 第72幀振幅最大(反相) → 第96幀振幅 0；
   • 三層波動錯開相位(0°、120°、240°)，形成連續波動感；
   • 不透明度同步動畫：波峰時不透明度 80%，波谷時 30%。
5. 粒子流體動畫：
   • 粒子圖層蒙版動畫：第1幀蒙版全白 → 第48幀蒙版徑向漸變(中心透明、邊緣不透明) → 第96幀蒙版全白，模擬粒子向外擴散再收縮；
   • 或逐幀手繪粒子位置(極耗時，僅極高精度需求時使用)。
6. 預覽播放(空格鍵)，微調時長、幅度、相位，直到視覺節奏感舒適；
7. 文件→導出→存為Web格式 → GIF(256色, 無限循環) 或 MP4(視頻時間軸模式下渲染視頻)。

進階：從PS到專業動效工作流的銜接

PS幀動畫適合概念驗證、UI標註、簡單循環動圖。若需投入生產環境(APP/Web/系統級動效)，建議遷移至專業工具鏈：

階段	工具	核心優勢
設計稿輸出	Figma / Sketch / Adobe XD	矢量無損、組件化、自動標註、交互原型
動效設計	After Effects + Bodymovin(Lottie) / Rive / Haiku Animator	關鍵幀曲線編輯、表達式編程、數據驅動、導出輕量級 JSON/WebGL
代碼實現	CSS @keyframes / Canvas API / WebGL / Lottie-Web / Rive Runtime	運行時性能最優、響應式、可交互

After Effects 重構 Siri 光環關鍵點

• 形狀圖層繪製基底環 → 添加「漸變描邊」→ 添加「路徑偏移」動畫(循環旋轉)；
• 添加「波浪扭曲」效果 → 表達式驅動 `waveHeight = audioAmplitude * factor` 實現聲音驅動(需音頻關鍵幀轉換)；
• 粒子系統：CC Particle World / Particular，發射器綁定環路徑，出生率/速度/壽命由音頻振幅驅動；
• 導出 Bodymovin JSON，前端直接用 Lottie-Web 渲染，文件極小(幾十KB)、無限縮放、可交互控制(播放/暫停/進度/顏色換膚)。

設計系統化建議

• 建立動效設計規範：光環顏色漸變色標、旋轉速度、波動頻率/幅度範圍、粒子參數範圍、縮放曲線、時長標準，寫入設計系統文檔；
• 組件化交付：輸出 Lottie JSON + 設計令牌(JSON/Figma Variables) + 交互狀態機定義(閒置/聆聽/思考/回應/錯誤)；
• 無障礙適配：提供「減少動態效果」偏好設置下的靜態降級方案(靜態光環靜止狀態)；
• 性能預算：Web端 Lottie < 50KB、幀率 60fps、主線程阻塞 < 16ms/幀。

通過本教程，你不僅能在PS中還原 Siri 光環動效，更能建立從「靜態視覺設計」到「動效交付標準」再到「前端工程落地」的完整認知鏈路。這正是現代產品設計師從「出圖工」進化為「設計工程師」的關鍵跨越。動手試做一個屬於你自己的品牌專屬智能助手光環吧！