「anime.js」ではeasingパラメータに関数名を入力することで、easingを設定することができます。easingを設定することで、より自然な動きのアニメーションを目指していきます。
linear
前回の記事で作成した手書き風アニメーションのeasingパラメータに関数「linear」を設定したサンプルです。
クリックでGIFアニメーションが再生されます
イージングが何もないアニメーションはリニアと呼ばれます。
アニメーションに加速や減速が無く、一定のスピードで動作します。
easeInSine・easeOutSine・easeInOutSine
同じアニメーションでeasingパラメータに関数名「easeInSine」、関数名「easeOutSine」、関数名「easeInOutSine」をそれぞれ設定したサンプルです。
「ease-In」アニメーションは、ゆっくりと動き始めてから加速していきます。
「ease-Out」アニメーションは、高速で動き出して最後に減速します。
「ease-In-Out」アニメーションは、ゆっくりと動き始めて中盤で加速し、最後に減速します。
Sineは三角関数のサインを表しています。
今回紹介するパラメータの中では一番控えめに緩急をつけます。
easeInCubic・easeOutCubic・easeInOutCubic
同じアニメーションでeasingパラメータに関数名「easeInCubic」、関数「easeOutCubic」、関数「easeInOutCubic」をそれぞれ設定したサンプルです。
Cubicは三次関数を表しています。Sineより強めの緩急がつきます。
easeInQuint・easeOutQuint・easeInOutQuint
同じアニメーションでeasingパラメータに関数名「easeInQuint」、関数「easeOutQuint」、関数「easeInOutQuint」をそれぞれ設定したサンプルです。
QuintはQuinticの略で五次関数を表しています。Cubicより強めの緩急がつきます。
easeInCirc・easeOutCirc・easeInOutCirc
同じアニメーションでeasingパラメータに関数名「easeInCirc」、関数名「easeOutCirc」、関数名「easeInOutCirc」をそれぞれ設定したサンプルです。
CircはCircularの略で円を表しています。
今回紹介するパラメータの中で一番強く緩急がつきます。
easingの使い分け
「linear」緩急の必要のないアニメーションで使用する。
「ease-In」動き出しが重く感じられるため、UIには向かない。フェードアウトの際に使用するとアクセントになる。
「ease-Out」動き出しのスピードが速いのでアニメーションの反応が早く感じられる。そのためUIの動作に向いている。
「ease-In-Out」アニメーションのコントラストが強調される。短めのアニメーションに向いている。
まとめ
アニメーションの用途にあわせて使い分けることで、自然な動きに近づけることができます。今回のサンプルでは「ease-In-Out」が適しているような気がします。
