イージングとは「動きの加減速」を示す用語で、アニメーションにおいては動きの「性格」を表すものです。適切なイージングを設定することで、ユーザーへ与える印象がかわります。世界観やユーザー体験をデザインするうえでイージングは欠かせない要素です。しかし、イージングは多くの種類があり、それぞれを把握し的確に使い分けるのは少し難易度が高いかもしれません。本記事はイージングの選定に役立つ、お手本的な使い分け方を紹介します。
※ 本記事ではイージングの第一人者であるRobert Penner氏が公開されている「Robert Penner's Easing Functions」を元に説明をしています。
イージングの性格
冒頭でも触れましたが、イージングは「最初はゆっくりで、徐々に早く変化させる」といった動きの「性格」を指定するものです。たくさんの種類がありますが、大まかに以下の4つに分けられます。
- linear： 等速で変化する。のっぺりとした安定した印象。
- easeIn： 徐々に加速する。加速するような勢いのある印象。
- easeOut： 徐々に減速する。変化の余韻が残りやすい印象。
- easeInOut： 加速してから減速。もっともメリハリのある印象。
また、イージングには性格の「強さ」が6種類（Sine・Quad・Cubic・Quart・Quint・Expo）あり、上記と組み合わせて「easeOutSine」「easeInOutExpo」といった表記がされます。
▲ Sine < Quad < Cubic < Quart < Quint < Expo の順で性格が強くなる
その他にも、以下のように特殊な動きをするイージングもあります。これらにもeaseIn・Out・InOutの種類がそれぞれに存在します。
- Circ： Expoのような強さを持つが、加速や減速の時間がよりゆるやか。
- Back： 少し行き過ぎてから戻ってくるような動き。
- Elastic： バネを離した時の往復するような動き。
- Bounce： ボールが跳ねるような跳ね返りの動き。
easeOut/easeInの使い分け
たとえば何かを登場させたい、移動させたいといったアニメーションには「easeOut」を基本的に使用します。動きに余韻を残すことで、ユーザーの意識を次の動作へスムーズに移行させます。
▲ 背景を「Linear」で表示。すぐ次の動作がはじまります。
▲ 背景を「easeOutExpo」で表示。余韻のあとに次の動作がはじまります。
ユーザーの操作によってアニメーションが発生する場合は、動き出しの早いイージングを設定する、アニメーションの時間を短くするといったユーザーへのフィードバックがすぐに返せるアニメーションを意識することも重要です。
▲「easeInExpo」でアニメーション。クリックしてからワンテンポ遅れます。
▲ 背景を「easeOutExpo」でアニメーション。クリックしてすぐに反応します。
「easeOut」はもっとも汎用的に使えるイージングです。適切なものが分からない、作り込んでいる時間がないといった場合でも、とりあえずデフォルトで設定されているイージングから「easeOut」に変えるだけで表現のレベルを上げられます。特に「easeOutQuint」「easeOutExpo」辺りがオススメです。
「easeIn」は勢いのある演出を表現したい場合に使用します。移動に合わせてスケール値を変化させるとより効果的です。他にもゆっくりとフェードアウトさせたい場合に、スポットライトの明かりが徐々に絞られていくような表現ができます。
linearの使い所
「linear」を使うと野暮ったい印象になるケースが多いのですが、短いフェードの演出、特に連続したアニメーションをさせたい場合に筆者はよく使用しています。
フェードの場合、透明度が0%や100%に近いときは変化がないように見えます。そのため、「easeOut」などを設定すると最後の余韻の部分が変化のない「意図しない間」に見えてしまうためです。
▲ 文章を「easeOut」でアニメーション。見出しが表示されたときに、止まって見える間が存在します。
これを解消するために「linear」を用います。「linear」に変えてアニメーションの秒数を短くすると同じような動きに見え、間がなくなるためアニメーションのテンポがよくなります。
▲ 文章を「linear」でアニメーション。連なった文章の表示テンポが良くなりました。
CSS3で色々なイージングを使うには
CSS3でのアニメーションはtransitionを使うことが多いですが、transitionにはイージングが「linear」「ease」「ease-in」「ease-out」「ease-in-out」の5種類しか用意されていません。これらは性格が弱く、特に動きにメリハリを付けたい場合には不向きです。
そこで、3次ベジェ曲線でイージングを設定できるcubic-bezierを使います。3次ベジェ曲線を表すためのコントロールポイントの座標を指定するのですが、数値だけでは実際の動きがイメージできず少し扱いづらいものとなっています。
この問題を解決する手段として、cubic-bezier.comやCeaserといった視覚的にイージングの曲線を描けるツールを利用します。PhotoshopやIllustratorでパスを描く要領でイージング曲線を作成し、必要なパラメータをコピー&ペーストで使えます。
また、今回紹介したイージングを使いやすいようパラメータを一覧にまとめましたので自由にご利用ください。
cubic-bezier(0.0, 0.0, 1.0, 1.0) /* linear */ |
cubic-bezier(.47, 0, .745, .715); /* easeSineIn */ |
cubic-bezier(.39, .575, .565, 1); /* easeSineOut */ |
cubic-bezier(.445, .05, .55, .95); /* easeSineInOut */ |
cubic-bezier(.55, .085, .68, .53); /* easeQuadIn */ |
cubic-bezier(.25, .46, .45, .94); /* easeQuadOut */ |
cubic-bezier(.455, .03, .515, .955); /* easeQuadInOut */ |
cubic-bezier(.55, .055, .675, .19); /* easeCubicIn */ |
cubic-bezier(.215, .61, .355, 1); /* easeCubicOut */ |
cubic-bezier(.645, .045, .355, 1); /* easeCubicInOut */ |
cubic-bezier(.895, .03, .685, .22); /* easeQuartIn */ |
cubic-bezier(.165, .84, .44, 1); /* easeQuartOut */ |
cubic-bezier(.77, 0, .175, 1); /* easeQuartInOut */ |
cubic-bezier(.755, .05, .855, .06); /* easeQuintIn */ |
cubic-bezier(.23, 1, .32, 1); /* easeQuintOut */ |
cubic-bezier(.86, 0, .07, 1); /* easeQuintInOut */ |
cubic-bezier(.95, .05, .795, .035); /* easeExpoIn */ |
cubic-bezier(.19, 1, .22, 1); /* easeExpoOut */ |
cubic-bezier(1, 0, 0, 1); /* easeExpoInOut */ |
cubic-bezier(.6, .04, .98, .335); /* easeCircIn */ |
cubic-bezier(.075, .82, .165, 1); /* easeCircOut */ |
cubic-bezier(.785, .135, .15, .86); /* easeCircInOut */ |
cubic-bezier(.6, -0.28, .735, .045); /* easeBackIn */ |
cubic-bezier(.175, .885, .32, 1.275); /* easeBackOut */ |
cubic-bezier(.68, -0.55, .265, 1.55); /* easeBackInOut */ |
※ 各値はCeaserから引用しています。「Elastic」と「Bounce」については、cubic-bezierでは再現できないため省略されています。
まとめ
イージングを変えるだけで、アニメーションの表情は大きく変わります。制作するものの雰囲気や目的に沿って使用できればベストですが、難しい場合は「easeOutQuint」「easeOutExpo」を設定しておくだけでも見栄えがよくなるので、ぜひお試しください。
また、feb19.jpさんの記事「アニメーションの調味料「イージング」の使い分けレシピ (透明度、UI、音量)」も非常に参考になりますので、よければ合わせてご覧ください。
ICS MEDIAではこの他にもアニメーションについて、記事「あえてズレを入れるのがミソ！ ウェブのアニメーションを「いい感じ」に魅せるズルいテクニック」や「CSS3だけで表現！ コピペで使えるマイクロインタラクション作りました」にまとめているのでご参考ください。
