ShapeShifter 是一個基于 Web 的工具，專注于為 Android、iOS 以及 Web 平臺快速生成圖標形變（morphing）動畫。它提供交互式的 SVG 路徑編輯界面，能夠自動處理不兼容的 SVG 命令，并將兩條不匹配的路徑通過 Needleman?Wunsch 算法對齊，從而生成平滑的形變效果。

• Shape Shifter官網入口網址：https://shapeshifter.design/
• Shape Shifter開源項目地址：https://github.com/alexjlockwood/ShapeShifter

主要功能：

• 交互式畫布：使用 paper.js 實現的 SVG 路徑繪制與編輯。
• 點操作：可在路徑上增刪點、拖拽移動、鍵盤刪除，支持逆序或平移點順序以微調動畫。
• 自動兼容轉換：將不兼容的 SVG 命令自動轉換為兼容格式。
• 自動修復：利用 Needleman?Wunsch?based 算法對齊并轉換兩條不兼容路徑。
• 多種導出方式：單獨的 SVG 文件，SVG 雪碧圖（spritesheet），CSS keyframe 動畫（適用于 Web），Android AnimatedVectorDrawable（AVD）文件。
• 可擴展：支持通過功能請求添加新的導出格式。

使用場景：

• 交互式網頁動畫：為網站圖標、按鈕或裝飾元素添加細膩的過渡效果。
• 數據可視化：將數據驅動的路徑動畫嵌入報告或儀表盤。
• 教學演示：在課堂或培訓中現場演示 SVG 動畫原理，因其離線特性無需擔心網絡中斷。
• 快速原型：設計師在概念階段快速生成動畫原型，隨后導出 SVG 交給前端開發實現。

通過簡潔的拖拽式操作與完整的圖層/時間軸控制，Shape?Shifter 為 SVG 動畫創作提供了一個即插即用、輕量高效的解決方案。