モーション
スプリングに基づくモーションのトークン、短い状態遷移、そしてモーションの低減に必ず従うという要件。
Tanrei のモーションは、変化を説明したら、すぐに退きます。その大半は、200〜250 ミリ秒かけてフェードインするステートレイヤーです。
モーションのトークンは、2 つの軸に沿ったスプリングとして整理されています。
- スペーシャルのスプリングは、ものを動かしたり、大きさを変えたりします。物体が落ち着くときのように、わずかに行き過ぎることがあります。
- エフェクトのスプリングは、色と不透明度を変えます。行き過ぎることはありません。色が弾むと、不具合に見えるからです。
どちらにも fast・default・slow があります。本物のスプリングアニメーションを持つプラットフォームは、剛性と減衰の値を使います。CSS は、あわせて保存されている時間と、cubic-bezier による近似を使います。
スキームは 2 つあります。standard が既定で、ほぼ臨界減衰です。expressive は追加のレイヤで、弾みを強くしたいプロダクトのためのものです。
スプリングではない遷移のために、固定の時間とイージングカーブを用意しています。
| 変化の種類 | 目安 |
|---|---|
| 状態の変化（ホバー、押下、選択） | 200–250ms |
| 要素が現れる | 300–400ms。大きな面ほど長く |
| 大きな表示の展開 | 最大 800ms。項目は 100ms ずつずらします |
| 何かが消える | 現れたときより速く |
| トークン | 値 | カーブ |
|---|---|---|
--tanrei-sys-motion-easing-emphasized-accelerate | cubic-bezier(0.3, 0, 0.8, 0.15) | |
--tanrei-sys-motion-easing-emphasized-decelerate | cubic-bezier(0.05, 0.7, 0.1, 1) | |
--tanrei-sys-motion-easing-enter | cubic-bezier(0.2, 0, 0, 1) | |
--tanrei-sys-motion-easing-exit | cubic-bezier(0.3, 0, 1, 1) | |
--tanrei-sys-motion-easing-linear | cubic-bezier(0, 0, 1, 1) | |
--tanrei-sys-motion-easing-spatial | cubic-bezier(0.2, 0, 0, 1) | |
--tanrei-sys-motion-easing-standard | cubic-bezier(0.2, 0, 0, 1) | |
--tanrei-sys-motion-easing-standard-accelerate | cubic-bezier(0.3, 0, 1, 1) | |
--tanrei-sys-motion-easing-standard-decelerate | cubic-bezier(0, 0, 0, 1) | |
--tanrei-sys-motion-easing-state | cubic-bezier(0.2, 0, 0, 1) |
生成元 design/tokens/tanrei.light.tokens.json, tokens/sys/motion.tokens.json
- フォーカスリングは即座に現れます。 キーボードを使う人は、アニメーションを待たずに、自分がどこにいるかを見られなければなりません。
- 既定ではリップルを描きません。 押下への応えはステートレイヤーです。リップルはテーマの水準で選ぶオプションで、基本の動作ではありません。
すべての実装は、プラットフォームの動きを減らす設定に従わなければなりません。この設定のもとでは、位置や大きさの動きを取り除くか、短いクロスフェードに置き換え、繰り返し続けるものはなくします。これは各コンポーネントの完了条件の一部であり、追加の改善ではありません。
すべての値は、モーションのトークンリファレンスに掲載しています。