【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>

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

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

• 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>

まとめ

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