JavaScript | animate()でアニメーションの巻き戻し・逆再生

JavaScript アニメーション 基本,JavaScript

JavaScriptのanimate()メゾットを使ったアニメーションの再生方向を反転させて、巻き戻し・逆再生に切り替える実装サンプルを紹介しています。

アニメーションの巻き戻し・逆再生

animate()メゾットを利用したアニメーションの巻き戻し・逆再生を実装したシンプルな動作サンプルとJavaScriptのサンプルコードです。

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

HTMLはアニメーションさせたい要素としてdivタグで「.item」を設置しています。

また、逆再生に切り替えるボタン用にButtonタグを配置しています。

<div class="item"></div>
<p><Button id="reverse">REVERSE</Button></p>

アニメーションさせるHTML要素「.item」には以下のCSSを指定しています。

.item {
	width: 80px;
	height: 80px;
	background: #4169e1;
	margin: 20px;
}

animate()メゾットで作成しているアニメーションの再生方向を反転させて巻き戻し・逆再生処理を行うにはreverse()メゾットが利用可能となっています。

reverse()メゾットは通常再生方向であれば逆再生に、逆再生中のアニメーションであれば通常方向の再生に切り替える事ができます。

stop()メゾットで停止中のアニメーションに対しても有効です。

このメゾットは対象のアニメーションに指定している「playbackRate」プロパティの値を変更します。

let anim = document.querySelector(`.item`).animate(
	[
		{ width: '0px' },
		{ width: '320px' }
	],
	{
		duration: 5000,
		iterations: Infinity
	}
);

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