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

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

 メニュー

【SVG】setInterval()を使ったアニメーション

setInterval()を使ったアニメーションをご紹介します。一定間隔でアニメーションさせたいときに使います。時間を表示する例を見ていきます。

setInterval()の設定

setInterval(関数, 時間間隔);

デモ

setInterval()を利用して、時間を表示する。

<text id="time" x="50" y="42" font-size="22" fill="navy" text-anchor="middle">00:00:00</text>
<script type="text/javascript">

var timeobj = document.getElementById("time").firstChild;

setInterval(function() {
  var now = new Date();
  timeobj.data = now.toTimeString().substring(0, 8);
}, 100);

</script>

00:00:00

setInterval()の解除

setInterval()を止めたい場合の書き方です。

デモ

<text id="time" x="36" y="36" font-size="22" fill="blue" text-anchor="middle">0</text>
<g font-size="8" text-anchor="middle">
  <g fill="magenta" onclick="start()">
    <rect x="10" y="45" width="20" height="10"/>
    <text x="20" y="62">start</text>
  </g>
  <g fill="cyan" onclick="stop()">
    <rect x="40" y="45" width="20" height="10"/>
    <text x="50" y="62">stop</text>
  </g>
</g>
<script type="text/javascript">

let timeobj = document.getElementById("time").firstChild;

let count = 0;
let id = null;
let time = 0;
let display = true;

function start() {
  if (id == null) {
    id = setInterval(function() {
      time++;
      if (display){
        timeobj.data = time;
      }
    }, 100);
  time = 0;
  display = true;
  }
}

function stop() {
  if (id != null) {
  clearInterval(id);
  id = null;
  }
}

</script>

0 start stop

まとめ

setInterval()の設定と解除を使ったアニメーションについて書きました。