javascript animateを停止する

作成日 2023.01.07
javascript
javascript

javascriptで、animateを停止するサンプルコードを記述してます。「animate」を停止させるにはanimateを生成したオブジェクトを「cancel」することで可能です。一時停止は「pause」となります。

1. 環境
2. animateを停止
3. 一時停止
4. 初期状態に戻す
5. サンプルコード

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 108.0.5359.125

Javascript サンプル集はこちら

animateを停止

animateを停止するには、
1.　生成した「animate」を変数に代入
2.　代入した変数に「cancel()」を使用
することで可能です。
※停止したものを開始させるには「play()」を使用します。

<style>
  .box {
	width: 80px;
	height: 80px;
	background: #37B507;
	margin: 5px;
  position:absolute;
  }
</style>

<div class="box"></div>

<button id="btnStart">start</button>
<button id="btnEnd">end</button>

<script>

let obj = document.getElementsByClassName('box')[0].animate(
  // 変化させるスタイル
  [
    { width: '0px' },
    { width: '500px' }
  ],
  // プロパティ
  {
    duration: 1000,
    iterations: Infinity,
    direction: 'alternate'
  }
);

// 停止処理
document.getElementById('btnEnd').addEventListener('click', function() {
  obj.cancel();
});

// 開始処理
document.getElementById('btnStart').addEventListener('click', function() {
	obj.play();
});

</script>

実行結果を見ると停止していることが確認できます。

一時停止

一時停止させる場合は「pause()」を使用します。

<script>

let obj = document.getElementsByClassName('box')[0].animate(
  // 変化させるスタイル
  [
    { width: '0px' },
    { width: '500px' }
  ],
  // プロパティ
  {
    duration: 1000,
    iterations: Infinity,
    direction: 'alternate'
  }
);

document.getElementById('btnEnd').addEventListener('click', () => {
  obj.pause();
});

document.getElementById('btnStart').addEventListener('click', () => {
	obj.play();
});

</script>

実行結果

初期状態に戻す

初期状態に戻す場合は「currentTime」に「0」を指定します。

<script>

let obj = document.getElementsByClassName('box')[0].animate(
  // 変化させるスタイル
  [
    { width: '0px' },
    { width: '500px' }
  ],
  // プロパティ
  {
    duration: 1000,
    iterations: Infinity,
    direction: 'alternate'
  }
);

document.getElementById('btnEnd').addEventListener('click', () => {
  obj.currentTime = 0;
});

document.getElementById('btnStart').addEventListener('click', () => {
	obj.play();
});

</script>

実行結果

サンプルコード

以下は、
「実行」ボタンをクリックすると、要素を点滅させる「animate」を起動して「停止」ボタンをクリックすると停止する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container text-center w-25" style="margin-top:150px">

    <h2><span class="badge badge-info">要素</span></h2>

    <button id="btnStrat" type="button" class="btn btn-raised btn-info">
      実行
    </button>
    <button id="btnStop" type="button" class="btn btn-raised btn-danger">
      停止
    </button>

  </div>

  <script>

    // animateのイベント用の変数
    let aevent;

    // 開始のクリックイベントを登録
    btnStrat.onclick = () => {

      aevent = document.getElementsByClassName('badge')[0].animate(
        // 変化させるスタイル
        [
          { opacity: 1 },
          { opacity: 0 }
        ],
        // プロパティ
        {
          duration: 500,
          iterations: Infinity
        }
      );

    };

    // 停止のクリックイベントを登録
    btnStop.onclick = () => {

      aevent.cancel();

    }
    
  </script>
</body>

</html>

停止ボタンで停止していることが確認できます。