イージングとスプリング
短い答え
イージングは設定されたタイミングカーブに従います。スプリングは本物のスプリングのように動き、自然に止まります。
フェード、色の変化、タイムドステップにはイージングを使用してください。移動またはドラッグに追従するオブジェクトにはスプリングを使用してください。
各パターンが何をするかを見る
それぞれの例を試してみる。その後、それが作られた仕事について読む
Easing
↗ イージング
イージングは、アニメーションが速くなったり遅くなったりする動きを決める時間の曲線です。
cubic-bezier()パネルは素早く入ってきて、ゆっくり止まるよ。閉じるときは、もっと短くてダイレクトだよ。
- 以下の場合に使用します
- 速度が重さ、方向、または目的を示すべき場合はイージングを使用してください。
- 以下の場合は使用しないでください
- すべての操作で同じ大きなバウンスを使ってはいけません。
- コードで使用する名前
cubic-bezier()
Spring Animation
↗ 春のアニメーション
春のアニメーションは物理モデルに従います。硬さ、減衰、質量、初速度が動き方を制御します。
stiffness / damping / massドラッグしたカードは、置かれる場所を少し通り過ぎてから、ゆっくりと収まります。
- 以下の場合に使用します
- 停止可能で、ユーザーの速度を維持すべきジェスチャー主導の動作に使用します。
- 以下の場合は使用しないでください
- 一般的なコントロールや敏感なタスクに、過度なバウンスを決して追加しないこと。
- コードで使用する名前
stiffness / damping / mass
クイック比較
| UIパターン | 最適 | のためではない | コードで使用する名前 |
|---|---|---|---|
| イージングEasing | 速度が重さ、方向、または目的を示すべき場合はイージングを使用してください。 | すべての操作で同じ大きなバウンスを使ってはいけません。 | cubic-bezier() |
| 春のアニメーションSpring Animation | 停止可能で、ユーザーの速度を維持すべきジェスチャー主導の動作に使用します。 | 一般的なコントロールや敏感なタスクに、過度なバウンスを決して追加しないこと。 | stiffness / damping / mass |
出荷前に
- 01
その人が何をする必要があるかを書き留めてください。
- 02
キーボード、フォーカス、タッチ、ズーム、読み込み、空、エラー状態をテストしてください。
- 03
人々がホバーや動作なしで同じ情報を得られるようにしてください。
- 04
小さい画面と大きい画面の両方で実コンテンツを使ってテストしてください。
04
比較リクエストをコピーできます
パターンを選ぶ際にチームが助けを必要とする場合、これをコピーしてください。
実際のユーザーフローに最適なパターンをイージング (Easing)、春のアニメーション (Spring Animation)から選んでください。このルールを使用してください: イージングは設定されたタイミングカーブに従います。スプリングは本物のスプリングのように動き、自然に止まります。 タスク、コンテンツ量、フローを停止するコストを書き出してください。キーボード、タッチ、読み込み、エラー、動作軽減の挙動を確認してください。選択理由を説明し、その後、プロジェクトのデザインシステムで最小限でアクセシブルなバージョンを作成してください。