Comment animer des morphs de chemin à l'aide de snap.svg

J'ai été chercher un bon exemple sur la façon d'animer une svg chemin de morphing. Je sais comment le faire faire assez complexes à l'aide de SMIL, mais composant logiciel enfichable.svg est nouveau et brillant, et tout le monde semble l'aimer, donc je voudrais prendre un coup d'oeil. Je ne peux pas trouver un bon exemple de n'importe où sur la façon de faire n animée chemin morph n'importe où. Espérons-le, un composant logiciel enfichable.svg guru pourrait me diriger dans la bonne direction?

voici un lien vers l'image svg et le code:

lien vers l'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>

source d'informationauteur Les Ballard | 2014-04-10

  1. 18

    Pas tout à fait sûr si vous voulez dire que vous voulez simplement le courant de l'animation dans le composant logiciel Enfichable ou quelque chose de différent. Juste pour donner un exemple de comment on peut normalement faire un peu d'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

    Edit: Il doit y avoir le même nombre de points sur le chemin de la transformation de/à.