アニメーションをソフトにして重み付けする方法を学びます。
自然界では、ある地点から別の地点に直線的に移動するものはありません。実際には、物体は移動するにつれて加速または減速する傾向があります。人間の脳はこのような動きを期待するようにできているため、アニメーション化する際には、このことを利用する必要があります。自然なモーションは、ユーザーがアプリをより快適に感じられるようにし、全体的なエクスペリエンスの向上につながります。
概要
- イージングを使用すると、アニメーションがより自然に感じられます。
- 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-in は突然終了するため、少し不自然に感じられることがあります。現実世界で動くものは、突然停止するのではなく、減速する傾向があります。イーズインには、開始時に動きが遅く感じられるというデメリットもあります。これは、サイトやアプリの応答性の認識に悪影響を及ぼします。
イーズイン アニメーションを使用するには、イーズアウト アニメーションやリニア アニメーションと同様に、キーワードを使用します。
transition: transform 500ms ease-in;
イーズイン / イーズアウト アニメーション
イーズインとイーズアウトの両方を使用すると、車の加速と減速に似た効果が得られます。適切に使用すれば、イーズアウトだけを使用するよりもドラマチックな効果が得られます。
アニメーションのイーズイン開始が遅くなるため、アニメーションの持続時間を長くしすぎないでください。通常は 300 ～ 500 ミリ秒の範囲が適していますが、正確な数値はプロジェクトの感触に大きく依存します。とはいえ、開始が遅く、中盤が速く、終了が遅いことで、アニメーションのコントラストが強くなり、ユーザーにとって非常に満足度の高いものになる可能性があります。
イーズイン / イーズアウト アニメーションを実現するには、ease-in-out CSS キーワードを使用します。
transition: transform 500ms ease-in-out;