Quick — 線を引く
ひとりでに引かれる線
- きっかけ
- 長さ
- --dur-quick 160ms
- イージング
- --ease-out cubic-bezier(0.16, 1, 0.3, 1)
- 動きを減らす設定
使っている場所
線が引かれていく様子は見えるのに、待たされるとは感じない長さです。リンクの下線はこれを --ease-out と組み合わせます。出だしは速く、終わりは柔らかく。
モーション
動きの長さとカーブ、そして「動きを減らす」設定のときのふるまい。どれもトークン名で示し、値は手で書かずにトークンファイルから読み込んでいます。
長さ
トークン
長さとイージングのトークン
| --dur-instant | 100ms |
| --dur-quick | 160ms |
| --dur-base | 240ms |
| --dur-move | 380ms |
| --dur-stage | 560ms |
| --ease-out | cubic-bezier(0.16, 1, 0.3, 1) |
| --ease-in | cubic-bezier(0.55, 0, 1, 0.45) |
| --ease-in-out | cubic-bezier(0.65, 0, 0.35, 1) |
| --spring | cubic-bezier(0.34, 1.56, 0.64, 1) |
長さ5つとカーブ4つ。スタイルシートの値を lib/design/tokens.ts に写し、テストで食い違いを防いでいます。新しい動きは、数値を直接書かず、トークンの名前で指定します。