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

How to animate path morphs using snap.svg

本文关键字：变形 动画 路径 设置 何使用 snap svg      更新时间：2023-09-26

我一直在寻找一个关于如何制作svg路径变形动画的好例子。我知道如何使用SMIL来完成非常复杂的操作，但snap.svg是新的、有光泽的，每个人似乎都喜欢它，所以我想看看。我在任何地方都找不到一个关于如何在任何地方进行动画路径变形的好例子。希望snap.svg大师能给我指明正确的方向？

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

链接到图像

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

不太确定您的意思是只想要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

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

如果你正在寻找只针对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, morphIndex: 127}).start();
document.addEventListener('click', function(){
    !tween.playing && tween.start();
}, false);
</script>

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

相关文章：