はじめに
JavaScriptでアニメーションの基本の書き方について学習したため備忘録として残しています。
アニメーションの基本
JavaScriptでアニメーションの指定をすることで、より豊かな表現が可能になる。
様々な関数やイベントと組み合わせることで、より柔軟にアニメーションを作成できる。
キーフレーム:アニメーションは開始時の値と終了時の値を指定することで、その2点の間の値を自動補完して滑らかな動きで表示することができる。
この自動補完の動かす内容のことを指す。
書き方
動かす要素.animate(第一引数, 第二引数);
第一引数にはキーフレーム(オブジェクト)を指定する
第二引数は再生時間(単位は**ミリ秒 １秒は1000と指定する)や細かい動きの指定
animateで指定できるプロパティ
複数を同時に指定することができる。
アニメーションの再生時間である[duration]は必須項目
delay
アニメーションの開始を遅らせる時間。整数値のミリ秒で記述。1秒の場合は1000とする。初期値は0。
direction
アニメーションを実行する方向
| 指定できる値 | 意味 |
|---|---|
| normal | 通常の方向で再生(初期値) |
| alternate | 奇数回で通常・偶数回で反対方向に再生(行って帰って行って帰って) |
| reverse | 逆方法に再生 |
| alternate-reverse | alternateの逆方向 |
duration
アニメーションの再生時間。必須項目
easing
アニメーションが変化する速度やタイミング
| 指定できる値 | 意味 |
|---|---|
| linear | 一定の速度で変化(初期値) |
| ease | 開始時と終了時は緩やかに変化 |
| ease-in | 最初はゆっくり、だんだん速く変化 |
| ease-out | 最初は速く、だんだんゆっくりと変化 |
| ease-in-out | 開始時と終了時はかなり緩やかに変化 |
| steps() | 段階ごとに変化 |
| cubic-bezier() | ベジェ曲線の座標に沿って変化 |
fill
アニメーションの再生前後の状態
| 指定できる値 | 意味 |
|---|---|
| none | なし(初期値) |
| forwards | 再生後、最後のキーフレームの状態を保持 |
| backwards | 再生前、最初のキーフレームの状態を適用 |
| both | forwardsとbackwardsの両方を適用 |
iterations
アニメーションを繰り返す回数。初期値は1。無限ループするにはinfinityを指定する。
offset
タイミングを調整するプロパティ。デフォルトでは、指定したアニメーションは等間隔のタイミングで実行されるが、offsetを使用すると任意のタイミングで実行できる。
補足
CSSアニメーションのタイムラインは パーセント（%） で実行割合を指定することができるが、JavaScriptのanimate()メゾッドでタイムラインの処理タイミングを割合で調節する場合は「offset」プロパティが利用可能。
「offset」プロパティは「0」から「1」の範囲で指定
CSSアニメーションでいうところの「0%」が「0」、「100%」が「1」となる
※数値が少数の場合は、一の位の0を省略して「.8」とも記述できる
CSSアニメーションとの違い
CSSだけでもtransitionやanimationプロパティを使ってアニメーションを実装することは可能。
JavaScriptを使うメリット
複数の画像を順番に表示したり、1つずつ遅延させたりと変数を加えた動きを実装できる。また、if文を使って条件をつけることも可能。
カーソルを合わせると少し見た目が変わる程度のものであればCSSを使って実装すると楽！
高度なアニメーションにしたい時はJavaScriptを利用すると良い