Aprende a suavizar tus animaciones y darles importancia.
Nada de lo que se encuentra en la naturaleza se mueve de forma lineal de un punto a otro. En realidad, los objetos tienden a acelerar o desacelerar a medida que se mueven. Nuestros cerebros están programados para esperar este tipo de movimiento, así que al hacer animaciones debes aprovechar esto. Si los movimientos son naturales, los usuarios se sentirán más cómodos con sus aplicaciones, lo que, a su vez, generará una mejor experiencia general.
Resumen
- La aceleración hace que tus animaciones se sientan más naturales.
- Elige animaciones de salida lenta para los elementos de la IU.
- Evita las animaciones de entrada lenta o de entrada y salida lentas, a menos que puedas ser breves. tienden a ser lentos con los usuarios finales.
En la animación clásica, se usa el término "movimiento lento" para referirse al movimiento que comienza lentamente y se acelera. y para los movimientos que comienzan con rapidez y se desaceleran, se hace “lento”. La terminología que se usa con mayor frecuencia en la Web para estas expresiones es “entrada y salida lentas”, respectivamente. A veces, los dos se combinan, lo que se denomina "entrada y salida lentas". La aceleración, entonces, es en realidad el proceso de hacer que la animación sea menos severa o pronunciada.
Palabras clave de la aceleración
Tanto las transiciones como las animaciones de CSS te permiten elegir el tipo de aceleración que deseas usar en tus animaciones. Puedes usar palabras clave que afecten la aceleración (o timing, como también suele llamarse) de la animación en cuestión. También puedes personalizar por completo la aceleración, lo que te da mucha más libertad para expresar la personalidad de tu app.
Estas son algunas de las palabras clave que puedes usar en el CSS:
linearease-inease-outease-in-out
Fuente: Transiciones de CSS, W3C
También puedes usar una palabra clave steps, que te permitirá crear transiciones con pasos discretos, pero las palabras clave mencionadas anteriormente son las más útiles para crear animaciones que resulten naturales.
Animaciones lineales
Las animaciones sin ningún tipo de aceleración se conocen como lineales. Un gráfico de una transición lineal se ve de la siguiente manera:
A medida que pasa el tiempo, el valor aumenta en cantidades iguales. Con el movimiento lineal, las cosas tienden a verse robóticas y antinaturales, y esto es algo que a los usuarios les resulta chocante. En términos generales, debes evitar el movimiento lineal.
Ya sea que programes tus animaciones con CSS o JavaScript, descubrirás que siempre existe una opción para el movimiento lineal.
Para lograr el efecto anterior con CSS, el código debería verse de la siguiente manera:
transition: transform 500ms linear;
Animaciones de salida lenta
Las salidas lentas hacen que la animación comience más rápido que las lineales y también tiene desaceleración al final.
Por lo general, la salida lenta es la mejor opción para el trabajo con la interfaz de usuario, ya que el inicio rápido proporciona a tus animaciones una sensación de receptividad y, al mismo tiempo, permite una desaceleración natural al final.
Cómo ver una animación de salida lenta
Existen muchas formas de lograr un efecto de salida lenta, pero la más simple es usar la palabra clave ease-out en CSS:
transition: transform 500ms ease-out;
Animaciones de entrada lenta
Las animaciones de entrada lenta comienzan y finalizan rápido, lo que es lo opuesto a las animaciones de salida lenta.
Este tipo de animación es como una piedra pesada que cae, donde comienza lentamente y llega al suelo rápidamente con un golpe amortiguador.
Sin embargo, desde el punto de vista de la interacción, las entradas lentas pueden resultar inusuales debido a su final abrupto. los objetos que se mueven en el mundo real tienden a desacelerar en lugar de simplemente detenerse repentinamente. Las entradas lentas también tienen el efecto perjudicial de sentirse lentas al comenzar, lo que afecta negativamente la percepción de receptividad en tu sitio o app.
Cómo ver una animación de entrada lenta
Para usar una animación de entrada lenta, de manera similar a las animaciones lineales y de salida lenta, puedes usar su palabra clave:
transition: transform 500ms ease-in;
Animaciones de entrada y salida lentas
Acelerar tanto la entrada como la salida es similar a la aceleración y la desaceleración de un automóvil y, si se usa con sensatez, puede proporcionar un efecto más dramático que el de una salida lenta.
No uses una duración demasiado larga de la animación, debido a la lentitud del inicio de la animación con entrada lenta. Por lo general, lo adecuado es algo en el rango de 300 a 500 ms, pero el número exacto depende en gran medida del aspecto de tu proyecto. Dicho esto, debido al inicio lento, una sección intermedia rápida y un final lento, habrá un mayor contraste en la animación, lo que puede resultar bastante satisfactorio para los usuarios.
Cómo ver una animación de entrada y salida lentas
Para obtener una animación de entrada y salida lentas, puedes usar la palabra clave ease-in-out de CSS:
transition: transform 500ms ease-in-out;