JavaScript | animate()でアニメーションのリセット
JavaScriptのanimate()メゾッドのアニメーションをリセット・キャンセルして初期状態に戻す場合の実装サンプルを紹介しています。
アニメーションのリセット
animate()を利用したアニメーションの進捗状況をリセット・キャンセルする動作サンプルとJavaScriptのサンプルコードです。
サンプルでは「リセットボタン」と「再生ボタン」を設置しています。
See the Pen JavaScript | Reverse animation with animate by yochans (@yochans) on CodePen.
HTMLにはアニメーションさせたい要素としてdivタグで「.item」を設置しています。
<div class="item"></div>
<p><Button id="pause">PAUSE</Button></p>
<p><Button id="play">PLAY</Button></p>アニメーションさせるHTML要素「.item」には以下のCSSを指定しています。
#item {
width: 80px;
height: 80px;
background: #4169e1;
margin: 20px;
}アニメーションをキャンセルする処理としてcancel()が用意されています。
cancel()プロパティはアニメーションを初期状態に戻して停止状態にします。
reset()というメゾッドは用意されていません。
let anim = document.querySelector(`.item`).animate(
[
{ width: '0px' },
{ width: '320px' }
],
{
duration: 5000,
iterations: Infinity
}
);
document.querySelector(`#cancel`).addEventListener('click', () => {
anim.cancel();
});
document.querySelector(`#play`).addEventListener('click', () => {
anim.play();
});animate()メゾッドで再生、一時停止中のアニメーションをリセットを実行して再生したままにするには「currentTime」プロパティの値を「0」にする事でも実装可能となっています。
「currentTime」プロパティの値を「0」にする事でアニメーションを初期状態に戻す事が可能ですが、再生状態は再生されたままになります。
リセット後の状態で停止しておきたい場合にpause()を後で記述すると、少しだけアニメーションが動いた状態で停止する事になります。
リセットした状態でアニメーションを停止しておきたい場合は、pause()メゾッドを先に記述しておくことで解決します。
この場合はcancel()を指定した場合と同じ状態になります。
let anim = document.querySelector(`.item`).animate(
[
{ width: '0px' },
{ width: '320px' }
],
{
duration: 5000,
iterations: Infinity
}
);
document.querySelector(`#reset`).addEventListener('click', () => {
anim.pause();
anim.currentTime = 0;
});
document.querySelector(`#play`).addEventListener('click', () => {
anim.play();
});