JavaScript | animate()でアニメーションの停止と再生

2022-03-15JavaScript アニメーション 基本,JavaScript

JavaScript | animate()でアニメーションの停止と再生

JavaScriptのanimate()メゾッドを使ったアニメーションの停止と再生の実装サンプルを紹介しています。

以下はanimate()メゾッドを利用したアニメーションの一時停止と再生ボタンを設置した動作サンプルです。

See the Pen JavaScript | expansion and contraction animation with animate by yochans (@yochans) on CodePen.

アニメーションの一時停止

animate()メゾッドで一時停止を実行するにはpause()メゾッドが利用可能です。

停止させる対象のアニメーションを指定します。

サンプルではButtonタグでのクリックイベントを使っていますが、様々なイベントや処理内で実行できます。

<Button id="pause">PAUSE</Button>
let anim = document.querySelector(`.item`).animate(
	[
		{ width: '80px' },
		{ width: '320px' }
	],
	{
		duration: 1000,
		iterations: Infinity,
		direction: 'alternate'
	}
);

document.querySelector(`#pause`).addEventListener('click', () => {
	anim.pause();
});

アニメーションの再生

animate()メゾッドで一時停止しているアニメーションを再生するにはplay()メゾッドが利用可能です。

再生させる対象のアニメーションを指定します。

サンプルではButtonタグでのクリックイベントを使っていますが、様々なイベントや処理内で実行できます。

<Button id="play">PLAY</Button>
let anim = document.querySelector(`.item`).animate(
	[
		{ width: '80px' },
		{ width: '320px' }
	],
	{
		duration: 1000,
		iterations: Infinity,
		direction: 'alternate'
	}
);

document.querySelector(`#play`).addEventListener('click', () => {
	anim.play();
});