Shape Shifter

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 动画创作提供了一个即插即用、轻量高效的解决方案。