Aprende a suavizar tus animaciones y lograr que sean interesantes.
Nada de lo que se encuentra en la naturaleza se mueve de forma lineal de un punto a otro. En la realidad, los objetos tienden a acelerar o desacelerar a medida que se mueven. Nuestros cerebros están configurados para esperar este tipo de movimiento. Por ello, al realizar animaciones debes sacar provecho a esto. Si los movimientos son naturales, los usuarios se sentirán más cómodos con tus apps, lo que a su vez derivará en una mejor experiencia general.
Resumen
- Gracias a la aceleración, tus animaciones se ven más naturales.
- Selecciona 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 hacer que sean breves, ya que generalmente resultan muy lentas para los usuarios finales.
En la animación clásica, para el movimiento que comienza lentamente y luego se acelera se usa el término “aceleración”, y para el movimiento que comienza rápidamente y luego se desacelera, “desaceleración”. La terminología que se usa con mayor frecuencia en la Web para estas expresiones es “entrada y salida lentas”, respectivamente. A veces, ambos se combinan y se denomina a esto “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 CSS:
linearease-inease-outease-in-out
Fuente: Transiciones de CSS, W3C
También puedes usar la palabra clave steps, que te permite crear transiciones con pasos discretos, pero las palabras clave que se mencionan 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 animaciones tienden a verse robóticas y poco naturales, y esto es algo que resulta chocante para los usuarios. En términos generales, debes evitar el movimiento lineal.
Independientemente de que codifiques tus animaciones mediante CSS o JavaScript, descubrirás que siempre existe una opción alternativa al movimiento lineal.
Para lograr el efecto anterior con CSS, el código se vería 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 maneras diferentes 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 lentamente y finalizan rápidamente, que es lo contrario de las de salida lenta.
Este tipo de animaciones son como una roca pesada que cae, con un comienzo lento, un impacto rápido contra el suelo y un choque asordinado.
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 de repente. Las entradas lentas también tienen el efecto perjudicial de verse demasiado lentas al comienzo, lo cual tiene un impacto negativo en la percepción de la receptividad de tu sitio o tu app.
Ver una animación de entrada lenta
Para usar una animación de entrada lenta, como en el caso de las animaciones lineales y de salida lenta, puedes aplicar las palabras claves correspondientes:
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.
Evita que la duración de la animación sea demasiado prolongada, debido a la lentitud del inicio de la animación con una entrada lenta. Lo adecuado es normalmente algo entre 300 y 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.
Ver una animación de entrada y salida lentas
Para lograr una animación de entrada y salida lentas, puedes usar la palabra clave ease-in-out de CSS:
transition: transform 500ms ease-in-out;