MonakaEasingに関する補足説明

正直なところ早見表を見てもよく動きが想像できないと言う人もいると思いますが
かといって全部試してみるとは大変だと思うので、若干の解説をします。
イージングに明るい方は読む必要はありません。

Linear
直線的な動き:始点から終点まで、一定の速度で直線的に移動します。
イージング無しと同意義です。
向いている動作:等速で動くオブジェクト、例えばプログレスバーの進行など。

Sine
easeInSine: ゆっくりスタートして徐々に加速し、滑らかに終わります。
easeOutSine: スピーディにスタートし、徐々に減速しながら終わります。
easeInOutSine: ゆっくりスタートし、中間で速くなり、再びゆっくり終わります


向いている動作:自然な動き、自然界の動きを模倣したい場合。例えば風に揺れる葉っぱなど。

Quad
easeInQuad: 初めはゆっくりとし、徐々に速度を上げていきます。
easeOutQuad: 速くスタートし、終わりにかけてゆっくりとなります。
easeInOutQuad: 最初と最後はゆっくり中間部で速く動きます。


向いている動作:加速や減速が必要な動き、オブジェクトの出現や消失、ページスクロールなど。深さが増すほど、加速や減速の効果が強調されます。
Quad, Cubic, Quart, Quintは基本的に同じ動きで強弱の差と考えてよいです。

Cubic
easeInCubic: 非常にゆっくり始まり、終わりにかけて急速に速度が上がります
easeOutCubic: 最初は速く終わりにかけて非常にゆっくりとします。
easeInOutCubic: 最初と最後は非常にゆっくりで、中間は非常に速い動きをします。

Quart
easeInQuart: 非常にスローで始まり、終わりに向かって非常に急激に加速します
easeOutQuart: 急激にスタートし、終わりにかけて非常にスローになります。
easeInOutQuart: 最初と最後は非常にスローで、中間は非常に急速に動きます。

Quint
easeInQuint: 極めてゆっくり始まり、終わりにかけて極めて急激に加速します。
easeOutQuint: 最初は極めて急で、終わりにかけて極めてゆっくりとなります。
easeInOutQuint: 最初と最後は極めてゆっくり中間は極めて急速です。

Back
easeInBack: 少し後退した後に前進し、加速します。
easeOutBack: 前進して少し後退することで終わります。
easeInOutBack: 少し後退してから前進し、再び少し後退する動きです。
easeOutBack2: さらに繊細な後退と前進を加えた動きです。この関数は私が使いたかっただけのOutBackのバリエーションです
easeOutBackWithInertia: easeOutBackと似ていますが、終わり近くで慣性が加わり少しオーバーシュートした後、落ち着きますこの関数も私が使いたかっただけのバリエーションです


向いている動作:少し戻る動き、ダイアログボックスのポップアップやボタンのクリックフィードバックなど、オブジェクトが目的地に到達する前に少し後退する動きを演出したい場合。

Elastic
easeInElastic: 伸び縮みしながら進み、最終的に目的地に着きます。
easeOutElastic: 目的地に向かって伸び縮みしながら、ややオーバーシュートした後に落ち着きます。
easeInOutElastic: 伸び縮みしながら進み中間で方向転換し、最終的にはゆっくりと目的地に着きます。


向いている動作:伸縮する動き、ドラッグアンドドロップのインタラクション、プルトゥリフレッシュの動きなど、オブジェクトが伸び縮みするような動きを表現したい場合。

Bounce
bounceIn: 跳ね返りながらゆっくりと始まり、最終的に落ち着きます。
bounceOut: 目的地に向かって跳ねながら進み、ゆっくりと落ち着きます。
bounceInOut: 跳ね返りながら始まり中間で速く進み、再び跳ねながら終わります


向いている動作:跳ね返る動き、着地や反発を表現したい場合。例えばボールが地面に跳ね返る、モーダルウィンドウが画面に跳ね返るように現れる場合など。

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

月別アーカイブ

限定特典から探す

記事を検索