今日はGSAPで使用できるイージングの種類について説明します。
GSAPでは、様々な種類のイージングが用意されています。
もちろん、自分でカスタマイズすることも可能ですが、今日はすでに用意されているイージングの種類についてみていきたいと思います。
イージングについて
そもそも「イージング」とはなんでしょうか。
イージングとは、『動きに緩急をつけること』です。
自然界において、物体が動き出してから止まるまで一定の速度で動き続けることはありません。
地球上には重力もあれば摩擦もあるからです。
アニメーションに適切なイージングをつけることで、私たちが日常でよく目にするような違和感のない動きにすることができます。
イージングには大雑把にイーズイン、イーズアウト、イーズインアウトの３種類があります。
それぞれ動作の始めや終わりの動きが異なります。
このあたりのことに関しては、こちらの記事がとてもわかりやすく説明してくださっているので、ご興味のある方はぜひご一読ください。
GSAPで用意されているイージング
GSAPではたくさんの種類のイージングが用意されています。
デフォルトには後述する「power1.out」が使用されていますが、easeプロパティを使うことで、上書きしてお好みのイージングに変更することができます。
例えば、以下のように記述することで、イージングのデフォルトを変更することができます。
gsap.defaults({
ease: "power2.in",
});GSAPにはたくさんの（自分でカスタムできるものも含めれば無限の）イージングがあるので、きっとあなたの理想のイージングも見つかるはず！
それでは、どのような種類のイージングがあるのでしょうか。
順番に見ていきましょう。
none
See the Pen sample-none by Michi (@Michi_) on CodePen.
イージングなしの指定ができます。
先ほどもお伝えしましたが、デフォルトで「power1.out」が使われているので、イージングをつけたくない時には「none」を設定しましょう。
power1
See the Pen sample-power1 by Michi (@Michi_) on CodePen.
GSAPのデフォルトとして「power1.out」が使用されています。
power1からpower4まであり、数字が大きくなるほど、イージングが強くなります。
power2
See the Pen sample-power2 by Michi (@Michi_) on CodePen.
power3
See the Pen sample-power3 by Michi (@Michi_) on CodePen.
power4
See the Pen sample-power4 by Michi (@Michi_) on CodePen.
back
See the Pen sample-back by Michi (@Michi_) on CodePen.
bounce
See the Pen sample-bounce by Michi (@Michi_) on CodePen.
circ
See the Pen sample-bounce by Michi (@Michi_) on CodePen.
elasric
See the Pen sample-elastic by Michi (@Michi_) on CodePen.
expo
See the Pen sample-expo by Michi (@Michi_) on CodePen.
sine
See the Pen sample-sine by Michi (@Michi_) on CodePen.
steps
See the Pen sample-steps by Michi (@Michi_) on CodePen.
stepsでは、アニメーションの開始地点から指定した回数をかけて終了地点へ到達します。
例えば、サンプルのひとつ目では、200pxの距離を５回に分けて移動しています。
指定した数値が大きくなるほど、小刻みな動きになります。
rough
See the Pen sample-rough by Michi (@Michi_) on CodePen.
このイージングを使用するためには、「EasePack」というファイルが必要です。
公式サイトにインストールの方法が書かれているので、こちらを参考にファイルを取り込んでください。
「ease: “rough”」の記述だけで動きますが、自分で動きをカスタマイズすることが可能です。
カスタマイズの方法については、こちらの記事をご覧ください。
slowMo
See the Pen sample-slow by Michi (@Michi_) on CodePen.
このイージングを使用するためには、「EasePack」というファイルが必要です。
公式サイトにインストールの方法が書かれているので、こちらを参考にファイルを取り込んでください。
「ease: “slow”」の記述だけで動きますが、自分で動きをカスタマイズすることが可能です。
カスタマイズの仕方については、後日記事をあげます。
expoScale
See the Pen sample-expoScale by Michi (@Michi_) on CodePen.
このイージングを使用するためには、「EasePack」というファイルが必要です。
公式サイトにインストールの方法が書かれているので、こちらを参考にファイルを取り込んでください。
「expoScale」では、縮小/拡大する始めの値と終わりの値を設定します。
1から5へ拡大するのであれば「expoScale(1, 5)」、逆に5から1へ縮小する場合は「expoScale(5, 1)」などと記述します。
こちらも自分でお好みの動きにカスタマイズすることができます。
カスタマイズの方法については、こちらの記事をご覧ください。
まとめ
今日はGSAPで使用できるイージングの種類を紹介しました。
たくさんのアニメーションがあって、見ているだけでワクワクしてきますね！
自分でアニメーションをカスタマイズできるようになると、さらに面白いです。
次は自分でカスタマイズする方法を説明していきたいと思います。
自分で好きなように動かせるようになると本当に面白いので、楽しみにしていてください！
参考サイト
コメント