如何使用snap.svg为​​路径变形设置动画

Question

我一直在寻找一个关于如何动画svg路径变形的好例子。我知道如何使用SMIL做相当复杂的，但snap.svg是新的和有光泽的，每个人似乎都喜欢它，所以我想看一看。我无法在任何地方找到关于如何在任何地方进行动画路径变换的好例子。希望snap.svg大师可以指出我正确的方向？

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

link to image

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400">
  <path id="thing"  d="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">
    <animate id="myAnimationElement" dur="2s" begin="0" repeatCount="indefinite" attributeName="d"
         values="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;

                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;"/>
  </path>
</svg>

Answer 1

不确定您是否只想要Snap中的当前动画或其他不同的东西。举一个例子来说明一个人通常会做一些动画......

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);

jsfiddle

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

Answer 2

如果您正在寻找仅适用于SVG Morph的内容，您可能不需要整个SnapSVG库，您可以使用KUTE.js。真的，看看这个（最好在Chrome和Firefox中查看）：

<div style="width: 220px">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
    <path id="rectangle" fill="indigo" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
                        c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"></path>
    <path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
                        l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"></path>

  </svg>
</div>

<script id="core" src="https://cdn.jsdelivr.net/kute.js/1.5.5/kute.min.js"></script>
<script id="svg" src="https://cdn.jsdelivr.net/kute.js/1.5.5/kute-svg.min.js"></script>

<script>
var tween = KUTE.to('#rectangle', { path: '#star' }, {duration: 1500, yoyo: true, repeat: 1}).start();

document.addEventListener('click', function(){
    !tween.playing && tween.start();
}, false);
</script>

它是免费的，而且非常易于使用。