JavaScript | animate()で繰り返しと反転・反復処理

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

JavaScriptのanimate()メゾットを使ったアニメーションで繰り返し(Infinite)と反転処理(alternate)を指定する方法を紹介しています。

※当ページではJavaScriptのanimate()メゾットでの指定方法になります。jQueryのanimate()では同じ方法で指定できませんので注意して下さい。

以下の動作サンプルは、シンプルなフェードインアニメーションに繰り返し(Infinite)と反転処理(alternate)を指定する事で反復処理を実装しています。

See the Pen JavaScript | Fade in with animate by yochans (@yochans) on CodePen.

繰り返し処理(infinite)を指定

animate()メゾットを利用してアニメーションに繰り返し処理を指定したシンプルなJavaScriptのサンプルコードです。

animate()メゾットで繰り返し処理を指定するにはオプションに「iterations: Infinity」を追加指定します。

勿論、「Infinite」のかわりに数値を指定する事で繰り返し回数を指定する事も可能です。

document.querySelector(`#item`).animate(
	[
		{ opacity: 0 },
		{ opacity: 1 }
	],
	{
		duration: 3000,
		iterations: Infinity
	}
);

反転処理(alternate)を指定

animate()メゾットを利用してアニメーションに反転処理を指定したシンプルなJavaScriptのサンプルコードです。

animate()メゾットで反転処理を指定するにはオプションに「direction: 'alternate’」を追加指定します。

繰り返し処理の「iterations: Infinity」を同時に指定する事で無制限に反復アニメーションを実行します。

document.querySelector(`#item`).animate(
	[
		{ opacity: 0 },
		{ opacity: 1 }
	],
	{
		duration: 3000,
		iterations: Infinity,
		direction: 'alternate'
	}
);

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

Posted by Yousuke.U