web-dev-qa-db-ja.com

イベント付きのSVGトリガーアニメーション

任意のイベントでjavascript経由でアニメーションを開始するためにsvg animate要素をトリガーするにはどうすればよいですか？ begin="mySpecialEvent"のようなものを想像してから、後でmySpecialEventを送信すると、アニメーションが開始されます（または、既に再生されている場合は再び開始されます）。

javascripteventsanimationsvg
37
Hendekagon

必要なものをカバーする記事は次のとおりです。
http://dev.opera.com/articles/view/advanced-svg-animation-techniques/

編集：リンクが削除されます。アーカイブされたコピー：

要するに：

  1. _<animation>_を使用して_begin="indefinite"_を作成し、ドキュメントのロード時に開始されるアニメーションを処理しないようにします。これは、JavaScriptまたは生のSVGソースを介して行うことができます。

  2. アニメーションを開始する準備ができたら、SVGAnimationElementインスタンス（_<animate>_要素）で beginElement() を呼び出します。ユースケースでは、準備ができたら標準のaddEventListener()コールバックを使用してこのメ​​ソッドを呼び出します。

    _myAnimationElement.addEventListener('mySpecialEvent',function(){
  myAnimationElement.beginElement();
},false);
_
51
Phrogz

SVGアニメーションを開始します。

JavaScriptを使用せずに、アニメーション要素でbegin event = "id.event"の "event-value"タイプ（ "on"プレフィックスなし）を使用します。または

<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="400px">
  <rect x="10" y="10" width="100" height="100">
    <animate attributeName="x" begin="go.click" dur="2s" from="10" to="300" fill="freeze" />
  </rect>
</svg>

<button id="go">Go</button>

（W3C 2018、「SVG Animations Level 2、Editor's Draft」、 https://svgwg.org/specs/animations/ ）、「タイミングを制御する属性「アニメーションの」、「begin」属性、「event-value」値タイプ、 https://svgwg.org/specs/animations/#TimingAttributes

Javascriptから、アニメーション要素のbegin属性を「indefinite」に設定します。スクリプトからbeginElement（）を呼び出します。

function go () {
  var elements = document.getElementsByTagName("animate");
  for (var i = 0; i < elements.length; i++) {
    elements[i].beginElement();
  }
}

<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="400px">
  <rect x="10" y="10" width="100" height="100">
    <!-- begin="indefinite" allows us to start the animation from script -->
    <animate attributeName="x" begin="indefinite" dur="2s" from="10" to="300" fill="freeze" />
  </rect>
</svg>

<button onclick="go();">Go</button>

（W3C 2018、「SVG Animations Level 2、Editor's Draft」、 https://svgwg.org/specs/animations/ ）、「タイミングを制御する属性「アニメーションの」、「begin」属性、「indefinite」値タイプ、 https://svgwg.org/specs/animations/#TimingAttributes

4
John Bentley