アニメーションを柔らかくして重み付けする方法について説明します。
自然界において、ある地点から別の地点に直線的に動くものはありません。実際には、物体は動くにつれて加速または減速する傾向があります。私たちの脳はこの種の動きを期待するように作られているため、アニメーション化するときは、これをうまく使う必要があります。自然な動きでユーザーがアプリに馴染み、全体的なエクスペリエンスの向上につながります。
まとめ
- イージングは、アニメーションをより自然に感じさせます。
- UI 要素にイーズアウト アニメーションを選択します。
- イーズインまたはイーズインアウトのアニメーションは、短くすることが可能な場合を除き、使用しないでください。エンドユーザーにとって動きが遅く感じられる傾向があります。
従来のアニメーションでは、ゆっくり始めて加速する動きは「スローイン」と呼ばれ、すばやく開始して減速する動きは「スローアウト」です。ウェブで最もよく使われている用語は、それぞれ「イーズイン」と「イーズアウト」です。この 2 つを組み合わせることで「イーズインアウト」と呼ばれることもあります。つまり、イージングはアニメーションの厳格さを緩和し、目立たないようにするプロセスです。
イージング キーワード
CSS の遷移とアニメーションでは、どちらもアニメーションに使用するイージングの種類を選択できます。対象のアニメーションのイージング（timing）に影響を与えるキーワードを使用できます。また、イージングを全面的にカスタマイズすれば、アプリの個性をより自由に表現できます。
CSS で使用できるキーワードには、次のようなものがあります。
linearease-inease-outease-in-out
また、steps キーワードを使用すると、個別のステップからなる遷移を作成できますが、自然に感じるアニメーションを作成するには、上記のキーワードが最も役立ちます。
リニア アニメーション
イージングが何もないアニメーションは、リニアと呼ばれます。線形遷移のグラフは次のようになります。
時間の経過とともに、値が等しく増加します。直線的な動きの場合、物事が機械的で不自然に感じられる傾向があり、ユーザーはこれを不快に感じます。一般的に、直線運動は避けるべきです。
CSS または JavaScript を使用してアニメーションをコーディングする場合でも、直線運動のためのオプションがあります。
CSS で上記の効果を実現するには、コードは次のようになります。
transition: transform 500ms linear;
イーズアウト アニメーション
イーズアウトは、アニメーションがリニアよりも速く開始し、最後に減速します。
イーズアウトは通常、ユーザー インターフェース作業に最適です。高速で開始することで、アニメーションに反応性を感じさせながら、最後には自然な速度を落とすことができます。
イーズアウト効果を実現する方法は多数ありますが、最もシンプルなのは CSS の ease-out キーワードです。
transition: transform 500ms ease-out;
イーズイン アニメーション
イーズイン アニメーションは、ゆっくりと開始して速く終了します。これは、イーズアウト アニメーションの逆です。
この種のアニメーションは、重い石が落下するようなものです。ゆっくりと始まり、止めるような強打で素早く地面に当たります。
しかし、インタラクションの観点から見ると、イーズインは突然終わるため、ちょっと変わったように感じることがあります。現実世界で動くものは、突然止まるのではなく、減速する傾向があります。イーズインには、開始時に動きが遅く感じられるという悪影響もあり、これはサイトやアプリの応答性の印象に悪影響を及ぼします。
イーズイン アニメーションを使用するには、イーズアウト アニメーションやリニア アニメーションと同様に、次のキーワードを使用します。
transition: transform 500ms ease-in;
Ease-in-out アニメーション
インとアウトのイージングは自動車の加速と減速に似ており、よく考えて使用することで、単なるイージングよりも劇的な効果を提供できます。
アニメーションの継続時間を過度に長くしないでください。アニメーションのイーズイン開始は遅いためです。通常は 300 ～ 500 ミリ秒の範囲が適していますが、正確な数値はプロジェクトの雰囲気に大きく依存します。とはいえ、スタートが遅く、中間点が遅い、エンドが遅いため、アニメーションのコントラストが強まり、ユーザーにとってはかなり満足できます。
Ease-in-out アニメーションを作成するには、CSS キーワード ease-in-out を使用します。
transition: transform 500ms ease-in-out;