アニメーションを柔らかくしたり、重みを持たせたりする方法について説明します。
自然界では、ある地点から別の地点に直線的に移動することはありません。実際には、物事は動くにつれて加速または減速する傾向があります。人間の脳はこの種の動きを想定しているので、アニメーション化するときは、この動きを活用する必要があります。自然な動きにより、ユーザーはアプリを快適に操作できるようになり、全体的なエクスペリエンスが向上します。
概要
- イージングにより、アニメーションがより自然に感じられます。
- 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;
イーズイン アニメーション
イーズイン アニメーションは、Ease-out アニメーションとは逆に、開始が遅く、速く終了します。
この種のアニメーションは重い石が落ちるようなものです。ゆっくりと始まって、勢いよく地面に落ちて止まるようなものです。
しかし、インタラクションの観点から見ると、ease-in は突然終了するため、少し不自然に感じることがあります。現実世界で動くものは、ただ突然止まるのではなく減速する傾向があります。また、イーズインは起動時の動作が遅くなるというデメリットもあり、サイトやアプリの応答性に悪影響を及ぼします。
イーズイン アニメーションを使用するには、イーズアウトや線形アニメーションと同様に、そのキーワードを使用します。
transition: transform 500ms ease-in;
イーズインアウト アニメーション
イーズインとイーズアウトのどちらも、自動車の加速と減速に似ています。賢く使用すれば、単にイーズアウトするよりも、より劇的な効果が得られます。
アニメーションの継続時間を過度に長くしないでください。アニメーションのイーズイン スタートが遅くなるためです。通常は 300 ～ 500 ミリ秒の範囲が適していますが、正確な数はプロジェクトの雰囲気に大きく依存します。とは言え、起動が遅く、中間が速く、終端が遅いため、アニメーションのコントラストが大きくなり、ユーザーはかなり満足できます。
イーズインアウト アニメーションを取得するには、ease-in-out CSS キーワードを使用します。
transition: transform 500ms ease-in-out;