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();
});