Tokens de movimiento
Duraciones por papel, la escala de duraciones, curvas de aceleración por papel, desde dónde aparece una superficie, y muelles.
Tokens de movimiento bajo tanrei.sys.motion. Para las pautas de uso, lee Movimiento.
Lo que tarda un cambio depende de lo que se mueve: un cambio de estado, una selección, una caja que cambia de tamaño, un contenido que se abre en su sitio y cada clase de superficie que aparece y se va tienen su papel. El token de duración de un componente es un alias de su papel, así que una capa cambia en una sola línea el tiempo de todos los componentes de un mismo papel. Una superficie se va más deprisa de lo que aparece. Los papeles siguen al dial de movimiento.
| Token | Valor | Vista previa |
|---|---|---|
--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 |
Generado a partir de design/tokens/tanrei.light.tokens.json, tokens/sys/motion.tokens.json
La escala de la que están hechos los papeles.
| Token | Valor | Vista previa |
|---|---|---|
--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 |
Generado a partir de design/tokens/tanrei.light.tokens.json, tokens/sys/motion.tokens.json
Las curvas, y los cuatro papeles con los que un componente acelera un cambio: enter para una superficie que aparece, exit para una que se va, state para un cambio de estado en su sitio y spatial para lo que se mueve o cambia de tamaño en su sitio. Cada papel nombra una curva de la escala.
| Token | Valor | Curva |
|---|---|---|
--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) |
Generado a partir de design/tokens/tanrei.light.tokens.json, tokens/sys/motion.tokens.json
Toda superficie que aparece —un menú, una lista, un popover, un tooltip, un diálogo, un snackbar— parte de la misma opacidad, la misma escala, la misma distancia y el mismo desenfoque, y se va por el mismo camino de vuelta. Una sola elección de tipo los fija a la vez; una capa elige otra, o fija uno de los valores.
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.
Generado a partir de tokens/sys/behavior.tokens.json
| Token | Valor |
|---|---|
--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 |
Generado a partir de design/tokens/tanrei.light.tokens.json, tokens/sys/motion.tokens.json
Cada muelle tiene cuatro subtokens. stiffness y damping gobiernan las plataformas con animación de muelles; duration y easing son la aproximación que se usa donde no hay muelles, como en CSS.
| Token | stiffness | damping | duration | easing | Curva |
|---|---|---|---|---|---|
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) |
Generado a partir de design/tokens/tanrei.light.tokens.json, tokens/sys/motion.tokens.json