1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

[JavaScript] アニメーションを学ぶ

Last updated at Posted at 2023-12-17

はじめに

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

アニメーションの基本

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

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

書き方

web Animation APIの基本の書き方
動かす要素.animate(第一引数, 第二引数);

第一引数にはキーフレーム(オブジェクト)を指定する
第二引数は再生時間(単位は**ミリ秒 1秒は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だけでもtransitionanimationプロパティを使ってアニメーションを実装することは可能。

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

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

参考

1冊ですべて身につくJavaScript入門講座 (著:Mana)

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?