如何使用snap.svg为​​路径变形设置动画 [英] How to animate path morphs using snap.svg

问题描述

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

I have been searching for a good example on how to animate a svg path morph. I know how to do do pretty complex ones using SMIL, but snap.svg is new and shiny, and everyone seems to love it, so I'd like to take a look. I can't find a good example anywhere on how to do n animated path morph anywhere. Hopefully a snap.svg guru could point me in the right direction?

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

here's a link to the svg image and the code for it:

链接到图片

<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中的动画或其他不同的东西。举个例子来说明一个人通常会做一些动画...

Not quite sure if you mean you just want the current animation in Snap or something different. Just to give an example of how one would typically do some animation...

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

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

There needs to be the same amount of points on the path to morph from/to.

这篇关于如何使用snap.svg为​​路径变形设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！