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

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

主要功能：

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

使用場(chǎng)景：

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

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