元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

【SVG】アニメーションの開始と終了の制御

アニメーションの開始と終了の制御について書きます。アニメーションの開始と終了をクリックで操作する例を見ていきます。また、アニメーションイベント属性にスクリプトを設定する方法をご紹介します。

アニメーションの開始と終了

  • beginElement():アニメーションを開始する
  • endElement():アニメーションを終了する

これらのメソッドを使用する場合は、予めアニメーション要素が持つbegin属性とend属性に、indefiniteを設定しておく必要がある。

デモ

ここでは、パスに沿って円が移動するアニメーションの例を見る。beginの円をクリックするとアニメーションが始まり、endの円をクリックすると終わる。

<defs>
  <path id="path1" d="M0,0 a25,25 0 1,1 0,50 l-30,0 a25,25 0 1,1 0,-50 z"/>
</defs>

<circle cx="65" cy="10" r="5" fill="limegreen">
  <animateMotion id="animoti" dur="10s" begin="indefinite" end="indefinite" repeatCount="indefinite" restart="whenNotActive">
    <mpath xlink:href="#path1"/>
  </animateMotion>
</circle>
<g font-size="12">
  <g fill="cyan" onclick="begin()">
    <circle cx="35" cy="25" r="5"/>
    <text x="45" y="28">begin</text>
  </g>
  <g fill="magenta" onclick="end()">
  <circle cx="35" cy="45" r="5"/>
  <text x="45" y="48">end</text>
  </g>
</g>

<script type="text/javascript">
var animotiobj = document.getElementById("animoti");

//アニメーションの開始
function begin() {
  animotiobj.beginElement();
}

//アニメーションの終了
function end() {
  animotiobj.endElement();
}
</script>

begin end

アニメーションイベント属性

アニメーション要素は、アニメーションイベント属性を持つ。それらの属性に関数やメソッドを設定する。

  • onbegin:アニメーションが始まったとき
  • onend:アニメーションが終了したとき
  • onrepeat:アニメーションの繰り返しが始まったとき

デモ

アニメーションの繰り返しが始まったときに、カウントアップする。

<line x1="50" y1="40" x2="50" y2="5" stroke-width="2" stroke="cyan">
  <animateTransform attributeName="transform" type="rotate" from="0,50,35" to="360,50,35" dur="1s" repeatCount="indefinite" onrepeat="countup()"/>
</line>
<text id="times" x="10" y="30" font-size="24" fill="magenta">0</text>

<script type="text/ecmascript">
var count = 0;
var timesobj = document.getElementById("times").firstChild;

function countup() {
  timesobj.data = ++count;
}
</script>

0

まとめ

アニメーションの開始と終了の制御について書きました。段々と難しくなってきましたが、サンプルコードを参考に自分なりのアニメーションを作ってみてください。