Shape Shifter

Shape Shifter 是一款面向 Android、iOS 与 Web 平台的在线 SVG 路径形变动画生成工具。该工具通过交互式编辑界面，帮助用户将两个不匹配的矢量路径自动对齐并生成流畅的过渡动画，适用于图标切换、界面动效等场景。

Shape Shifter官网入口网址：https://shapeshifter.design

核心功能

• 交互式路径编辑：基于 paper.js 构建的画布支持直观绘制与调整 SVG 路径，用户可自由增删、拖拽控制点，并通过键盘操作优化路径结构。
• 路径兼容性处理：自动识别并转换不兼容的 SVG 指令（如不同命令类型或参数数量），确保输入路径满足动画生成的基本要求。
• 智能路径对齐：采用 Needleman-Wunsch 算法对两条路径进行序列比对与插值，解决点数不一致或结构差异问题，生成视觉连贯的 morphing 效果。
• 多平台导出支持：可输出独立 SVG 文件、SVG 雪碧图（spritesheet）、CSS @keyframes 动画代码，以及 Android 平台专用的 AnimatedVectorDrawable（AVD）资源文件。
• 离线可用：作为纯前端应用，所有计算在浏览器中完成，无需网络连接即可使用，适合演示或受限网络环境。

典型应用场景

• 为网站或移动应用中的图标、按钮设计平滑的状态切换动画；
• 在数据可视化项目中实现动态路径演变，增强信息传达效果；
• 教学环境中实时演示 SVG 动画原理与路径插值技术；
• 设计师快速验证动效概念，并将标准格式交付开发团队实现。

Shape Shifter 以简洁的界面和精准的路径处理能力，为动效设计提供了高效、可靠的轻量级解决方案，已被 千流导航 收录推荐。