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

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

主要功能：

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

使用場景：

• 交互式網(wǎng)頁動畫：為網(wǎng)站圖標(biāo)、按鈕或裝飾元素添加細(xì)膩的過渡效果。
• 數(shù)據(jù)可視化：將數(shù)據(jù)驅(qū)動的路徑動畫嵌入報告或儀表盤。
• 教學(xué)演示：在課堂或培訓(xùn)中現(xiàn)場演示 SVG 動畫原理，因其離線特性無需擔(dān)心網(wǎng)絡(luò)中斷。
• 快速原型：設(shè)計師在概念階段快速生成動畫原型，隨后導(dǎo)出 SVG 交給前端開發(fā)實現(xiàn)。

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