JavaScript アニメーション 停止

JavaScript アニメーション 停止: Animation.pause() メソッドで制御する方法

JavaScript アニメーション 停止: Animation.pause() メソッドで制御する方法

JavaScript でアニメーションを一時停止する方法について解説します。`Animation.pause()` メソッドを使って、アニメーションを一時停止する方法、そして再生する方法を具体的なコード例とともに紹介します。

アニメーションの一時停止: Animation.pause() メソッド

  • `Animation` インターフェースの `pause()` メソッドは、実行中のアニメーションを一時停止するために使用されます。
  • このメソッドは、アニメーションを現在の状態のまま停止させます。
  • 例:

<div id="myElement"></div>
<script>
  const element = document.getElementById("myElement");
  const animation = element.animate(
    [
      { transform: 'translateX(0)' },
      { transform: 'translateX(100px)' }
    ], 
    {
      duration: 2000,
      iterations: Infinity
    }
  ); 

  // アニメーションを一時停止
  animation.pause(); 
</script>

アニメーションの再生: Animation.play() メソッド

  • 一時停止したアニメーションを再開するには、`Animation.play()` メソッドを使用します。
  • `pause()` メソッドで停止した時点からアニメーションが再開されます。
  • 例:

<script>
  // アニメーションを再開
  animation.play(); 
</script>

アニメーションの制御: その他のメソッド

アニメーションを制御するためのその他の便利なメソッドを紹介します。

メソッド 説明
Animation.finish() アニメーションを直ちに終了します。
Animation.cancel() アニメーションをキャンセルし、初期状態に戻します。
Animation.reverse() アニメーションを逆再生します。

使用例: アニメーションのインタラクティブな制御

ボタンクリックでアニメーションを一時停止、再開する例を以下に示します。


<div id="myElement"></div>
<button id="toggleAnimation">一時停止/再開</button>
<script>
  const element = document.getElementById("myElement");
  const toggleButton = document.getElementById("toggleAnimation");
  const animation = element.animate(
    [
      { transform: 'translateX(0)' },
      { transform: 'translateX(100px)' }
    ], 
    {
      duration: 2000,
      iterations: Infinity
    }
  ); 

  toggleButton.addEventListener('click', () => {
    if (animation.playState === 'paused') {
      animation.play();
    } else {
      animation.pause();
    }
  });
</script>

まとめ

`Animation.pause()` メソッドと `Animation.play()` メソッドを使用することで、 JavaScript でアニメーションを簡単に一時停止、再開できます。 これらのメソッドを利用して、よりインタラクティブでユーザーフレンドリーなウェブページを作成することができます。

参考文献

QA

Q1: `Animation.pause()` を使用してもアニメーションが一時停止しない場合はどうすればよいですか？

A1: アニメーションが開始される前に `animation.pause()` が呼び出されていないか確認してください。アニメーションは開始されてから一時停止する必要があります。

Q2: `Animation.play()` を使用してもアニメーションが再開しない場合はどうすればよいですか？

A2: アニメーションが既に終了しているか、キャンセルされていないか確認してください。終了またはキャンセルされたアニメーションは再開できません。

Q3: アニメーションの特定の時点に移動するにはどうすればよいですか？

A3: `Animation.currentTime` プロパティを使用すると、アニメーションの現在の時間を取得または設定できます。これにより、アニメーションの特定の時点に移動できます。

その他の参考記事:jquery stop