guillermolg00/morphicons

解決的問題

morphicons 提供了一種方法，可動畫化兩個不同筆畫圖示（例如 Lucide、Tabler 或 Heroicons 中的圖示）之間的過渡，使一個圖示能平滑地『變形』為另一個。它透過數學對齊來找出兩個形狀之間最自然的路徑，從而消除手動定義旋轉群組或處理插值過程中形狀縮小或歪斜的需要。

工作原理

該程式庫使用 2D Procrustes 分析和極座標插值，以封閉形式求解形狀之間的最佳相似性。這確保當兩個圖示在旋轉下全等時，過渡會呈現為旋轉，而非扭曲的變形。它支援三種操作模式：非控制模式（當屬性變更時自動動畫）、控制模式（用於手勢或捲動的明確進度）以及指令式模式（使用句柄透過程式碼觸發動畫）。

適用對象

使用 React、Vue、Svelte、React Native 或純 HTML/Web Components 的前端開發者，希望在不需複雜設定或執行時相依性的情況下，獲得高品質、基於物理的圖示動畫。

特色

• 通用相容性：適用於任何筆畫圖示資料（Lucide、Tabler、Heroicons、Iconoir 等）。
• 多框架支援：提供 React、Vue、Svelte、React Native 和 Astro 的專用綁定，以及原生 JS DOM 驅動程式。
• 基於物理：使用彈簧物理實現平滑、自然的過渡。
• 零執行時相依性：核心邏輯獨立於任何框架。
• 彈性輸出目標：可渲染為內嵌 SVG、CSS 遮罩（透過 maskTarget）或 2D Canvas（透過 canvasTarget）。
• 以可存取性為先：內建支援 reduced-motion 作業系統設定。