アニメーションをやわらかく見せたり、重みを与えたりする方法を学習します。
自然界の中で、一地点から別の場所に直線的に移動するものはありません。実際には、物は移動するときに加速または減速する傾向があります。私たちの脳は、この種の動きを自然と予測するようにできているので、アニメーション化するときは、この傾向を生かします。ユーザーが快適に感じる自然な動きをアプリに取り入れることで、全体的なエクスペリエンスを向上させることができます。
概要
- イージングによって、アニメーションはより自然に見えます。
- 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;
Ease-out アニメーション
Easing out では、アニメーションはリニアのものよりも高速で動き出し、最後に減速します。
一般的に、ease 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 キーワードの ease-in-out を使用します。
transition: transform 500ms ease-in-out;