Movimiento
Tokens de movimiento basados en muelles, transiciones de estado breves y la obligación estricta de respetar la preferencia de reducir movimiento.
En Tanrei, el movimiento explica un cambio y luego se aparta. La mayor parte es una capa de estado que aparece con un fundido de 200 a 250 milisegundos.
Los tokens de movimiento se organizan como muelles a lo largo de dos ejes:
- Los muelles espaciales mueven o redimensionan cosas. Pueden sobrepasar ligeramente su destino, como un objeto físico al asentarse.
- Los muelles de efectos cambian el color y la opacidad. Nunca se sobrepasan, porque un color que rebota parece un fallo.
Cada tipo viene en rápido, predeterminado y lento. Las plataformas con animación de muelles real usan los valores de rigidez y amortiguación; CSS usa la duración y la aproximación con cubic-bezier que se guardan junto a ellos.
Hay dos esquemas. Estándar es el predeterminado y tiene una amortiguación casi crítica. Expresivo es una capa adicional con más rebote, para los productos que lo quieran.
Para las transiciones que no son muelles se ofrecen duraciones y curvas de aceleración fijas.
| Tipo de cambio | Pauta |
|---|---|
| Cambio de estado (paso del cursor, pulsación, selección) | 200–250ms |
| Un elemento que entra | 300–400ms, más cuanto mayor es la superficie |
| Una revelación grande | hasta 800ms, con los elementos escalonados cada 100ms |
| Todo lo que sale | más rápido de lo que entró |
| 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
- El anillo de foco aparece al instante. Quien usa el teclado necesita ver dónde está sin esperar a una animación.
- Sin onda de forma predeterminada. La respuesta a la pulsación es la capa de estado; la onda es una opción del tema, no un punto de partida.
Toda implementación debe respetar el ajuste de reducir movimiento de la plataforma. Con él activo, el movimiento espacial se elimina o se sustituye por un fundido cruzado breve, y nada se repite en bucle. Esto forma parte de la definición de terminado de cada componente, no es una mejora.
Todos los valores figuran en la referencia de tokens de movimiento.