モーショントークン

tanrei.sys.motion 以下にあるモーションのトークンです。使い方の指針は、モーションを参照してください。

役割ごとの時間

link

変化にかかる時間は、何が動くかで決まります。状態の変化、選択、大きさが変わる箱、その場で開く内容、そして現れては消える面の種類ごとに役割があります。コンポーネントの時間のトークンは自分の役割の別名なので、レイヤーは 1 行で、同じ役割のコンポーネントすべての時間を変えられます。面は、現れるときより速く消えます。役割の時間はモーションのダイヤルに従います。

トークン	値	プレビュー
--tanrei-sys-motion-role-appear-anchored-enter	300ms
--tanrei-sys-motion-role-appear-anchored-exit	250ms
--tanrei-sys-motion-role-appear-hint-enter	250ms
--tanrei-sys-motion-role-appear-hint-exit	200ms
--tanrei-sys-motion-role-appear-modal-enter	350ms
--tanrei-sys-motion-role-appear-modal-exit	300ms
--tanrei-sys-motion-role-appear-sheet-enter	400ms
--tanrei-sys-motion-role-appear-sheet-exit	350ms
--tanrei-sys-motion-role-appear-toast-enter	350ms
--tanrei-sys-motion-role-appear-toast-exit	300ms
--tanrei-sys-motion-role-disclosure	400ms
--tanrei-sys-motion-role-feedback	450ms
--tanrei-sys-motion-role-reduced	100ms
--tanrei-sys-motion-role-resize-default	300ms
--tanrei-sys-motion-role-resize-large	400ms
--tanrei-sys-motion-role-selection-mark	250ms
--tanrei-sys-motion-role-selection-travel	250ms
--tanrei-sys-motion-role-show-delay	300ms
--tanrei-sys-motion-role-state-compact	200ms
--tanrei-sys-motion-role-state-default	250ms
--tanrei-sys-motion-role-state-large	250ms

生成元 design/tokens/tanrei.light.tokens.json, tokens/sys/motion.tokens.json

時間

link

役割の時間のもとになるスケールです。

トークン	値	プレビュー
--tanrei-sys-motion-duration-short1	50ms
--tanrei-sys-motion-duration-press-hold	100ms
--tanrei-sys-motion-duration-short2	100ms
--tanrei-sys-motion-duration-stagger	100ms
--tanrei-sys-motion-duration-short3	150ms
--tanrei-sys-motion-duration-short4	200ms
--tanrei-sys-motion-duration-medium1	250ms
--tanrei-sys-motion-duration-medium2	300ms
--tanrei-sys-motion-duration-medium3	350ms
--tanrei-sys-motion-duration-medium4	400ms
--tanrei-sys-motion-duration-long1	450ms
--tanrei-sys-motion-duration-long2	500ms
--tanrei-sys-motion-duration-long3	550ms
--tanrei-sys-motion-duration-long4	600ms
--tanrei-sys-motion-duration-extra-long1	700ms
--tanrei-sys-motion-duration-extra-long2	800ms
--tanrei-sys-motion-duration-extra-long3	900ms
--tanrei-sys-motion-duration-extra-long4	1000ms

生成元 design/tokens/tanrei.light.tokens.json, tokens/sys/motion.tokens.json

イージング

link

曲線と、コンポーネントが変化を緩急づける 4 つの役割です。enter は現れる面、exit は消える面、state はその場での状態の変化、spatial はその場で動くものや大きさが変わるものに使います。どの役割も、スケールの曲線のどれかを指しています。

トークン	値	カーブ
--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

面がどこから現れるか

link

現れる面はすべて（メニュー、リスト、ポップオーバー、ツールチップ、ダイアログ、スナックバー）、同じ不透明度、拡大率、距離、ぼかしから始まり、消えるときは同じ道を戻ります。これらは 1 つの「種類の選択」がまとめて決めます。レイヤーは別の選択肢を選ぶことも、値の 1 つを固定することもできます。

tanrei.sys.behavior.appearance

How a surface appears and leaves: a menu, a select's or a combobox's list, a popover, a tooltip, a dialog, a snackbar. fade-scale: it fades in and grows from 0.96 of its size toward its origin. fade: it only fades in. fade-slide: it fades in and travels a short way into place (sys.space.space100). blur-slide: it fades in, travels the same way and comes into focus from a 4 px blur. unfold: it fades in and unfolds from its anchored edge, scaled from 0 along the axis that leaves the anchor. The choice sets sys.motion.appear.*; a layer that pins one of those keeps it whatever the choice. A surface that leaves runs its appearance back. A sheet slides in from its edge under every choice.

取り得る値

— 既定値。その選択を描けないプラットフォームのフォールバックでもあります

生成元 tokens/sys/behavior.tokens.json

トークン	値
--tanrei-sys-motion-appear-blur	0px
--tanrei-sys-motion-appear-distance	0px
--tanrei-sys-motion-appear-opacity	0
--tanrei-sys-motion-appear-origin	anchor
--tanrei-sys-motion-appear-scale	0.96

生成元 design/tokens/tanrei.light.tokens.json, tokens/sys/motion.tokens.json

スプリング

link

各スプリングには 4 つのサブトークンがあります。stiffness と damping は、スプリングアニメーションを持つプラットフォームで使います。duration と easing は、CSS のようにスプリングを使えない場所のための近似です。

トークン	stiffness	damping	duration	easing	カーブ
tanrei.sys.motion.spring.expressive.default-effects	1600	1	200ms	cubic-bezier(0.34, 0.8, 0.34, 1)
tanrei.sys.motion.spring.expressive.default-spatial	380	0.8	500ms	cubic-bezier(0.38, 1.21, 0.22, 1)
tanrei.sys.motion.spring.expressive.fast-effects	3800	1	150ms	cubic-bezier(0.31, 0.94, 0.34, 1)
tanrei.sys.motion.spring.expressive.fast-spatial	800	0.6	350ms	cubic-bezier(0.42, 1.67, 0.21, 0.9)
tanrei.sys.motion.spring.expressive.slow-effects	800	1	300ms	cubic-bezier(0.34, 0.88, 0.34, 1)
tanrei.sys.motion.spring.expressive.slow-spatial	200	0.8	650ms	cubic-bezier(0.39, 1.29, 0.35, 0.98)
tanrei.sys.motion.spring.standard.default-effects	1600	1	200ms	cubic-bezier(0.34, 0.8, 0.34, 1)
tanrei.sys.motion.spring.standard.default-spatial	700	0.9	500ms	cubic-bezier(0.27, 1.06, 0.18, 1)
tanrei.sys.motion.spring.standard.fast-effects	3800	1	150ms	cubic-bezier(0.31, 0.94, 0.34, 1)
tanrei.sys.motion.spring.standard.fast-spatial	1400	0.9	350ms	cubic-bezier(0.27, 1.06, 0.18, 1)
tanrei.sys.motion.spring.standard.slow-effects	800	1	300ms	cubic-bezier(0.34, 0.88, 0.34, 1)
tanrei.sys.motion.spring.standard.slow-spatial	300	0.9	750ms	cubic-bezier(0.27, 1.06, 0.18, 1)

生成元 design/tokens/tanrei.light.tokens.json, tokens/sys/motion.tokens.json