アニメーションを柔らかくしたり、重みを持たせたりする方法について説明します。
自然界の中で、一地点から別の場所に直線的に移動するものはありません。実際には、物は移動するときに加速または減速する傾向があります。人間の脳はこの種の動きを想定しているので、アニメーション化するときは、この動きを活用する必要があります。自然な動きにより、ユーザーはアプリを快適に使用できるようになり、全体的なエクスペリエンスが向上します。
概要
- イージングによって、アニメーションはより自然に見えます。
- UI 要素には ease-out アニメーションを使用します。
- ease-in または ease-in-out のアニメーションは、短くできる場合を除き、使用しないでください。エンドユーザーが遅く感じる傾向があります。
従来のアニメーションでは、ゆっくりと動き出して加速する動きは「スローイン」、高速で動き出して減速する動きは「スローアウト」と呼ばれます。一般的に、ウェブの世界ではこれを「ease in」と「ease out」という専門用語で表現します。これらを組み合わせた「ease in out」という用語が使われることもあります。イージングとは、アニメーションを滑らかで自然に見せるためのプロセスです。
イージングのキーワード
CSS 遷移とアニメーションではどちらも、アニメーションに使用するイージングの種類を選択できます。また、対象とするアニメーションのイージング（timing とも言います）に影響を与えるキーワードを使用することができます。また、イージングを完全にカスタマイズすることもできます。これによって、より自由に独創的なアプリに仕上げることができます。
以下は CSS で使用できるキーワードの一部です。
linearease-inease-outease-in-out
出典: CSS 遷移、W3C
steps キーワードを使用することもできます。これによって離散的なステップのトランジションを作成することができますが、自然に感じるアニメーションを作成する上で最も有用なのは上に列挙したものです。
リニア アニメーション
イージングが何もないアニメーションは「線形」と呼ばれます。リニア遷移のグラフは次のようになります。
時間に比例して、一定の割合で値が増加します。直線運動では、物事がロボットのように不自然に感じられることが多く、ユーザーが不快に感じます。そのため、一般的には直線運動は避けたほうがよいでしょう。
CSS や JavaScript を使用してアニメーションのコーディングをする場合は、直線運動用のオプションを使用できます。
CSS で上記の効果を実現するためのコードは次のようになります。
transition: transform 500ms linear;
イーズアウト アニメーション
Easing out では、アニメーションはリニアのものよりも高速で動き出し、最後に減速します。
通常、ユーザー インターフェースの処理には Eass Out（イーズアウト）が最適です。なぜなら、開始が速く、アニメーションの応答性が感じられる一方で、最後には自然に遅くなるためです。
Ease out 効果を実現する方法はたくさんありますが、最も単純なのは CSS の ease-out キーワードを使う方法です。
transition: transform 500ms ease-out;
Ease-in アニメーション
ease-in アニメーションは、動き始めはゆっくりで、最後に速くなります。つまり ease-out の逆です。
この種のアニメーションは、重い石が落下するときの動きに似ています。つまり、ゆっくりと動き始め、最後は勢いよく地面にぶつかって止まります。
しかし、相互操作の観点からは、ease-in は突然終わるため、少し不自然に感じられます。現実の世界で動くものは突然止まるのではなく、徐々に減速するためです。さらに、ease-in には動き出しが重く感じられるという難点があるため、サイトやアプリの反応が悪く見えるおそれがあります。
ease-in アニメーションを使用するには、ease-out やリニア アニメーションと同様に、そのキーワードを使用します。
transition: transform 500ms ease-in;
Ease-in-out アニメーション
Ease-in-out は、車の加速と減速に似ています。慎重に使用すれば、ease out よりもさらに劇的な効果を実現できます。
アニメーションの継続時間は、極端に長くしないでください。長すぎると、ease-in の効果によってアニメーションの始まりが重く見えます。通常は 300 ～ 500 ミリ秒の範囲が適していますが、正確な数はプロジェクトの雰囲気に大きく依存します。ease-in-out はゆっくりと立ち上がり、中盤で加速し、ゆっくりと終了するので、全体としてアニメーションのコントラストが強調されるため、ユーザーには好まれると考えられます。
イーズインアウト アニメーションを取得するには、ease-in-out CSS キーワードを使用します。
transition: transform 500ms ease-in-out;