Elige la aceleración adecuada para tu proyecto, ya sea una entrada o salida lentas o ambas. ¡Quizás incluso uses rebotes para hacer más diversión!
Ahora que ya analizamos las diversas opciones disponibles para acelerar las animaciones, ¿qué tipo deberías usar en tus proyectos y qué tipo de duraciones deben tener tus animaciones?
Resumen
- Usa animaciones de salida lenta para los elementos de la IU; una salida lenta Quintic es una facilidad muy atractiva, aunque rápida.
- Asegúrate de usar la duración de la animación; las salidas y las entradas lentas deben durar entre 200 ms y 500 ms, mientras que los rebotes y las aceleraciones elásticas deben tener una duración más larga de 800 ms a 1200 ms.
En términos generales, una salida lenta será la opción correcta y, sin dudas, un buen parámetro predeterminado. Se inicia rápido, lo que da a tus animaciones una sensación de receptividad, lo cual es conveniente, pero con una agradable demora al final.
Existe un grupo de ecuaciones de salida lenta reconocidas más allá de la especificada con la palabra clave ease-out en CSS, cuyos niveles de "agresividad" varían. Para lograr un efecto de salida lenta rápida, considera usar una salida lenta Quintic.
Cómo ver una animación de salida lenta Quintic
Otras ecuaciones de aceleración, en particular los rebotes o las aceleraciones elásticas, se deben usar con moderación y solo cuando sea apropiado para tu proyecto. Algunos aspectos hacen que el usuario salga de una experiencia, como las animaciones molestas. Si tu proyecto no pretende ser divertido, entonces no hagas que los elementos reboten por la interfaz de usuario. Por el contrario, si estás creando un sitio que debería ser alegre, usa rebotes.
Prueba con facilidades, observa cuáles coinciden con la personalidad de tu proyecto y avanza desde ahí. Para obtener una lista completa de los tipos de aceleraciones, junto con las demostraciones, consulta easings.net.
Cómo elegir la duración correcta para las animaciones
Es importante que las animaciones que se agreguen a tu proyecto tengan la duración correcta. Si es demasiado corta, la animación parecerá agresiva y nítida. Si es demasiado larga, será entorpecedora y molesta.
- Salidas lentas: aproximadamente entre 200 ms y 500 ms. De este modo, el ojo puede ver la animación, pero no es entorpecedora.
- Entradas lentas: aproximadamente entre 200 ms y 500 ms. Ten en cuenta que se sacudirá al final y ningún cambio en la sincronización podrá suavizar ese impacto.
- Efectos de rebote o elásticos: aproximadamente entre 800 ms y 1,200 ms. Debes dejar tiempo suficiente para que el efecto de rebote o elástico se “asiente”. Sin este tiempo adicional, la parte de rebote elástico de la animación será agresiva y desagradable para la vista.
Por supuesto, estas son solo pautas. Experimenta con tus propias aceleraciones y elige lo que sea más conveniente para tus proyectos.