Easeingについて

Easeingというのは値が変化するタイミングなどをコントロールするものですが、WEBサイトにもよく使用されます。

Easeingには、大まかに分類するとlinear(一定速度)、Ease-in(後半から加速)、Ease-out(後半からゆっくり)、Ease-in-out(前半と後半に加速)に分けられます。

linear以外のEaseはパラメーターをいじる事でコントラストの強弱を表現する事が出来ます。じゃあ結局どのEaseを使用したらいいかというと、これといった正解はありませんが、日常で見るようなEeasingを取り入れることが大切になります。

ではどんなEaseが一番しっくり来るのかというと、ease-out(後半ゆっくり)になります。ゆっくりになりながら止まる光景はいろんなところで見ます。車であったり転がるボールなど。duration(アニメーションの長さ)を長くする事でより自然な動きになります。逆にEase-inは加速しながら止まるので、日常ではあまり見る光景ではありません。ただ、バウンスアニメーションなどにはぴったりと思います。

lineaは一定の速度で進むのあまり日常になじみのない動きです。カメラのパンなど機械的な動きに使用出来ますが、物が動くEaseとはいません。

ユーザーがアクションを起こした時に反応するEasesingに使用する場合はEase-inやEase-in-outを使用することをおすすめします。