イージング効果 (イージング カーブ) をユーザー インターフェイスに追加する_html/css_WEB-ITnose

Web インターフェイスにフラット デザインが導入されて以来、アニメーションの品質がますます重要になってきました。インターフェイスにアニメーション効果を追加すると、製品全体のスタイルに直接影響を与えることができ、アニメーションによって複雑なインタラクションが簡単になり、優れたアニメーション デザインによってユーザー エクスペリエンスも向上します。しかし、高品質のアニメーションを作成するにはどうすればよいでしょうか?イージング カーブは非常に重要になっており、アニメーションをより良くするためのアニメーションの中核機能にもなっています。

問題は、イージング カーブがどのように機能するかを理解するのがわかりにくいことです。この記事のいくつかの例が、作業中のアニメーションにイージング カーブ機能を追加する方法をより深く理解するのに役立つことを願っています。

イージング カーブは実際には加速モードを定義するカーブです。イジング カーブには、モーション カーブ、時間関数、ベジェ カーブ、カーブなどと呼ばれる別の名前もあります。イージング カーブのさまざまな形状には、イーズイン、イーズアウト、イーズインアウトなどの異なる名前も付いています。

イージング カーブの仕組み

イージング カーブは X 軸と Y 軸を使用して作成されます。 X と Y の意味は、あるアプリケーションから別のアプリケーションへの意味です。開発においては、X と Y も同じ意味です。アニメーションのパーセンテージ、つまり X 軸 (時間) に対応するアニメーションのパーセンテージ (Y) を定義するために使用されます。

イージング カーブとはどのようなものですか?いつ使用しますか?これは実際には時間と空間の概念です。

時間と空間

時間とは、アニメーションが完了するまでにかかる時間を指します。スペースは「frame」を指します。これはアニメーション間の間隔であり、Y 軸のパーセンテージであり、各アニメーションのパーセンテージ間のスペースです。以下に、イージング カーブを使用して間隔を表示する方法を示します。垂直方向の速度は速いことを意味し、水平方向の速度は遅いことを意味します。

リニアイージング間隔

リニアイージングとは、ポイントのアニメーションの動きが空間内で均一な動きであることを意味します。

イーズインスペース

イーズインとは、スペース内のポイントのアニメーションの動きが最初は遅く、その後徐々に速度が上がることを意味します。それは加速された動きとして理解できます。

イーズアウト間隔

イーズアウトとは、ポイントのアニメーションの動きが最初は空間内で加速し、その後徐々に減速することを意味します (これは錯覚です)。減速動作として理解できます。

イージング カーブのデザイン

イージング カーブをいつ使用するべきかという質問をよく受けますが、私の答えは、それはすべてアニメーションのシーンによるということです。すべてのアニメーションで使用できる単一のイージング カーブはありません。そして、これらの絵画を制作することがデザイン運動の鍵でした。イージング カーブを使用した設計は、世界に物理学を実装することから生まれますが、常にそれらのルールに従うわけではありません。現実世界は、アニメーションのインスピレーションを得るのに最適な場所の 1 つです。たとえば、現実世界には、すぐに加速したり停止したりする物体はありません。常に何らかの加速または減速が発生します。以下のビデオでは、アニメーションの 12 の原則を紹介しています。これらはすべて物理学 (現実世界のオブジェクトの動き) に基づいています。

アニメーションの 12 原則に関するチュートリアルについては、ここをクリックして読むこともできます。

イージング カーブを設計するときは、垂直方向は速く、水平方向は遅い ということを必ず覚えておいてください。作成される曲線はインタラクション デザインによって異なります。グリッド内にさまざまなタイプの曲線を作成できます (キーフレームを分割すると、アニメーションはキーフレーム間の値を残します。このようにして、リバウンドアニメーション効果のようなことを行うことができます。

次のような 3 次ベジェ曲線を作成できるオンライン Web ツールが多数あります。

cubic-bezier.com

• Cesear
• Easings .net
開発中のイージング カーブ

開発中、イージング カーブはタイミング関数と呼ばれます。これらは、ベジェ曲線加速パターンの作成にも使用されるいくつかの数学方程式です。開発でよく使用される関数は cubic-bezier です。これはこの記事の後半で紹介するメインコンテンツでもあります。

ほとんどのプログラミング言語では、イーズイン、イーズアウト、イーズインアウトなどのいくつかのイージング カーブが定義されています。これらの事前定義された曲線がどのように定義されているかについては、ドキュメントを参照してください。以下は主に CSS で定義済みのイージング カーブをリストします。

イーズイン = 立方体ベジェ(.42, 0, 1, 1)

• イーズアウト = 立方体ベジェ(0, 0, .58, 1)
• ease-in-out = cubic-bezier(.42, 0, .58, 1)
CSS でイージング カーブを定義

CSS で使用しても OK定義されたクラスのグローバル イーズ。これは各キーフレームにも適用されます。たとえば、バウンス アニメーション エフェクトを作成すると、バウンスはアニメーションの各キーフレームに適用されます。

各キーフレーム内でイージング カーブを正確に定義できます。覚えておくべき重要なことは、イージング カーブのパーセンテージ値を定義する前に、まずイージングを実現する方法について考える必要があるということです。

.object-class {    animation-name: animation-rocks;    animation-timing-function: cubic-bezier(1,.01,.91,.46);}

@keyframes animation-name {    0% {        animation-timing-function: cubic-bezier(1,.01,.91,.46);    }    25% {        animation-timing-function: linear;    }    50% {        animation-timing-function: cubic-bezier(0,.02,0,1.01);    }    75% {        animation-timing-function: linear;    }    100% {        animation-timing-function: linear;    }}

曲线延迟(Curved Delays)

Easing Curves的概念并不仅仅适用于单个动画，但也可以应用于延迟。比如下面的示例：

非常感谢你花时间阅读这篇文章，如果你想了解更多相关的知识，可以 点击这里获取 。如果你有更好的经验和想法，欢迎在下面的评论中和我们一起分享。

本文根据 @Ryan Brownhill 的《 Crafting Easing Curves for User Interfaces 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： https://medium.com/@ryan_brownhill/crafting-easing-curves-for-user-interfaces-34f39e1b4a43#.blkcnbpw2 。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3：核心技术与案例实战 》。