はじめに

JavaScriptでアニメーションの基本の書き方について学習したため備忘録として残しています。

アニメーションの基本

JavaScriptでアニメーションの指定をすることで、より豊かな表現が可能になる。
様々な関数やイベントと組み合わせることで、より柔軟にアニメーションを作成できる。

キーフレーム:アニメーションは開始時の値と終了時の値を指定することで、その2点の間の値を自動補完して滑らかな動きで表示することができる。
この自動補完の動かす内容のことを指す。

web Animation APIの基本の書き方

動かす要素.animate(第一引数, 第二引数);

第一引数にはキーフレーム(オブジェクト)を指定する
第二引数は再生時間(単位は**ミリ秒　１秒は1000と指定する)や細かい動きの指定

複数を同時に指定することができる。
アニメーションの再生時間である[duration]は必須項目

アニメーションの開始を遅らせる時間。整数値のミリ秒で記述。1秒の場合は1000とする。初期値は0。

アニメーションを実行する方向

指定できる値	意味
normal	通常の方向で再生(初期値)
alternate	奇数回で通常・偶数回で反対方向に再生(行って帰って行って帰って)
reverse	逆方法に再生
alternate-reverse	alternateの逆方向

アニメーションの再生時間。必須項目

アニメーションが変化する速度やタイミング

アニメーションの再生前後の状態

アニメーションを繰り返す回数。初期値は1。無限ループするにはinfinityを指定する。

タイミングを調整するプロパティ。デフォルトでは、指定したアニメーションは等間隔のタイミングで実行されるが、offsetを使用すると任意のタイミングで実行できる。

補足
CSSアニメーションのタイムラインは パーセント（%） で実行割合を指定することができるが、JavaScriptのanimate()メゾッドでタイムラインの処理タイミングを割合で調節する場合は「offset」プロパティが利用可能。

「offset」プロパティは「0」から「1」の範囲で指定
CSSアニメーションでいうところの「0%」が「0」、「100%」が「1」となる
※数値が少数の場合は、一の位の0を省略して「.8」とも記述できる

CSSだけでもtransitionやanimationプロパティを使ってアニメーションを実装することは可能。

JavaScriptを使うメリット
複数の画像を順番に表示したり、1つずつ遅延させたりと変数を加えた動きを実装できる。また、if文を使って条件をつけることも可能。

カーソルを合わせると少し見た目が変わる程度のものであればCSSを使って実装すると楽！
高度なアニメーションにしたい時はJavaScriptを利用すると良い