Javascript 如何使用snap.svg设置路径变形的动画

我一直在寻找一个关于如何设置svg路径变形动画的好例子。我知道如何使用SMIL完成相当复杂的任务，但是snap.svg是新的、有光泽的，每个人似乎都喜欢它，所以我想看一看。我在任何地方都找不到一个关于如何在任何地方进行n动画路径变形的好例子。希望snap.svg专家能为我指明正确的方向

以下是svg图像的链接及其代码：

---

不太确定您的意思是只想在快照中显示当前动画还是其他动画。仅举一个典型的动画制作示例

s = Snap(400, 620);

var path = s.path("M94.2,265.7L82,203.4c43.3-15.6,83.8-29.2,137.1-20.2c61.5-27.6,126.1-56.9,202.6 46.1c18.7,18.9,21.5,39.8,12.2,62.3C322.7,231.9,208.2,247.6,94.2,265.7z");

path.animate({ d: "M179.4,83.5l62.4-11.8c15.3,43.4-76,102.6-22.6,111.5c61.5-27.6,126.1-56.9,202.6-46.1c18.7,18.9,21.5,39.8,12.2,62.3C250.6,296.7,52.4,259.2,179.4,83.5z" }, 1000, mina.bounce);

---

编辑：从/到变形的路径上需要有相同数量的点。

如果您只查找SVG变形，可能不需要整个SnapSVG库，您可以使用。真的，看看这个（最好在Chrome和Firefox中查看）：

var tween=KUTE.to（'#rectangle'，{path:'#star'}，{duration:1500，yoyo:true，repeat:1，morphIndex:127}）.start（）；
document.addEventListener（'click'，function（）{
！tween.playing&&tween.start（）；
}，假）；

太棒了！谢谢，这正是我所寻找的，如果我想为更多的路径设置动画，我会这样做：''作为旁注，我很确定你需要有一个类似于路径的结构，否则它将无法工作。例如，您不能将

M94.2265.7l82203.4c43.3-15.6,83.8-29.2137.1-20.2c61.5-27.6126.1-56.9202.6 46.1c18.7,18.9,21.5,39.8,12.2,62.3C322.7231.9208.2247.6,94.2265.7z变形为
m0h100v100z
。如果我错了，请有人纠正我。你是对的，它只能在有相同数量的点从/到变形的情况下进行管理。我希望有一个工具来准备字符串路径或曲线，我的意思是有GSAP morphSVG插件和SVG Morpheus来这样做，但是第一个是俱乐部成员项目，第二个很难理解它的编码。为什么不使用SVG Morpheus，因为它是从说明中得到的，您需要知道它的编码吗？
s = Snap(400, 620);

var path = s.path("M94.2,265.7L82,203.4c43.3-15.6,83.8-29.2,137.1-20.2c61.5-27.6,126.1-56.9,202.6 46.1c18.7,18.9,21.5,39.8,12.2,62.3C322.7,231.9,208.2,247.6,94.2,265.7z");

path.animate({ d: "M179.4,83.5l62.4-11.8c15.3,43.4-76,102.6-22.6,111.5c61.5-27.6,126.1-56.9,202.6-46.1c18.7,18.9,21.5,39.8,12.2,62.3C250.6,296.7,52.4,259.2,179.4,83.5z" }, 1000, mina.bounce);