Suavizado vs. Resorte
El suavizado sigue una curva de tiempo establecida. Un resorte se mueve como un resorte real y se detiene por sí mismo.
Use suavizado para fundidos, cambios de color y pasos temporizados. Use un resorte para objetos que se mueven o siguen un arrastre.
Ver lo que hace cada patrón
Prueba cada ejemplo. Luego lea sobre el trabajo para el que fue hecho.
Suavizado
El suavizado es la curva de tiempo que define cómo una animación acelera y frena.
cubic-bezier()Un panel entra rápido y se detiene suavemente. Su salida es más corta y directa.
- Úsalo cuando
- Use suavizado cuando la velocidad deba mostrar peso, dirección o propósito.
- No lo uses cuando
- Nunca uses el mismo rebote grande para cada interacción.
- Nombre usado en código
cubic-bezier()
Animación de resorte
La animación de resorte sigue un modelo físico. La rigidez, amortiguación, masa y velocidad inicial controlan cómo se mueve.
stiffness / damping / massUna tarjeta arrastrada se pasa un poco de su lugar y luego vuelve a su sitio.
- Úsalo cuando
- Úsalo para movimiento liderado por gestos que puede detenerse y debe mantener la velocidad del usuario.
- No lo uses cuando
- Nunca agregues demasiado rebote a controles comunes o tareas sensibles.
- Nombre usado en código
stiffness / damping / mass
Comparación rápida
| Patrón de UI | Mejor para | No para | Nombre usado en código |
|---|---|---|---|
| SuavizadoEasing | Use suavizado cuando la velocidad deba mostrar peso, dirección o propósito. | Nunca uses el mismo rebote grande para cada interacción. | cubic-bezier() |
| Animación de resorteSpring Animation | Úsalo para movimiento liderado por gestos que puede detenerse y debe mantener la velocidad del usuario. | Nunca agregues demasiado rebote a controles comunes o tareas sensibles. | stiffness / damping / mass |
Antes de lanzarlo
- 01
Escribe lo que la persona necesita hacer.
- 02
Probar el teclado, enfoque, tacto, zoom, carga, estados vacíos y de error.
- 03
Asegurarse de que las personas puedan obtener la misma información sin pasar el cursor o movimiento.
- 04
Probar con contenido real en pantallas pequeñas y grandes.
Petición de comparación que puedes copiar
Copia esto cuando tu equipo necesite ayuda para elegir entre los patrones.
Elige el mejor patrón de Suavizado (Easing), Animación de resorte (Spring Animation) para nuestro flujo de usuario real. Usa esta regla: El suavizado sigue una curva de tiempo establecida. Un resorte se mueve como un resorte real y se detiene por sí mismo. Anota la tarea, la cantidad de contenido y el costo de detener el flujo. Comprueba el teclado, toque, carga, errores y movimiento reducido. Explica tu elección y luego crea la versión accesible más pequeña usando el sistema de diseño del proyecto.