要素が画面に入る際のMaterial Design減速イージング

Material Design減速カーブ

減速カーブは、ビューポートに入る要素 — 画面外からスライドイン、フェードイン、またはシードポイントから成長する要素のために設計されています。

値

transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

x1とy1の両方が0であり、カーブは最大速度から開始し、ランプアップはありません。要素は最初に表示されたときにすでに動いているように見えます。その後、2番目のコントロールポイント(0.2, 1)に導かれて、最終位置に近づくにつれて徐々に減速します。

加速フェーズがない理由

要素が画面外から入るとき、ユーザーはその旅の始まりを見ません。フルスピードで開始すると、要素が表示される前からすでに動いていたという錯覚を作り出します。

標準カーブとの比較

Standard:   ——遅い——→ 速い ——→ 遅い
Decelerate: 速い ——————————→ 遅い
Accelerate: 遅い ——————————→ 速い

コード例

.dialog {
  transform: translateY(100%);
  transition: transform 350ms cubic-bezier(0, 0, 0.2, 1);
}
.dialog.visible {
  transform: translateY(0);
}

このパターンは、Materialスタイルのアプリケーションのボトムシート、スナックバー、サイドナビゲーションドロワーでよく使用されます。