web-dev-qa-db-ja.com

snap.svgを使用してパスモーフをアニメーション化する方法

私は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>
javascriptsvgsnap.svgsvg-morphing
12
Les Ballard

スナップで現在のアニメーションが必要なのか、それとも別のものが必要なのかはよくわかりません。通常、アニメーションを実行する方法の例を示すために...

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

編集：モーフィング元/先へのパス上に同じ量のポイントが存在する必要があります。

18
Ian

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>

それは無料で本当に使いやすいです。

7
thednp