Desvíate de lo común y crea animaciones totalmente personalizadas para tus proyectos.
En algunos casos, no querrás usar las palabras clave de aceleración que se incluyen con CSS, o usarás animaciones web o un framework de JavaScript. Por lo general, en estos casos puedes definir tus propias curvas (o ecuaciones), y esto te proporcionará mucho control sobre el aspecto de las animaciones de tu proyecto.
Resumen
- La aceleración personalizada te permite darles más personalidad a tus proyectos.
- Puedes crear curvas Bézier cúbicas similares a las curvas de animación predeterminadas (salida lenta, entrada lenta, etc.), pero con énfasis en diferentes lugares.
- Usa JavaScript cuando necesites tener más control sobre la sincronización y el comportamiento de las animaciones; por ejemplo, animaciones elásticas o de rebote.
Si realizas animaciones con CSS, descubrirás que puedes definir curvas Bézier cúbicas para definir la sincronización. De hecho, las palabras clave ease, ease-in, ease-out y linear se asignan a curvas Bézier predefinidas, las cuales se detallan en la especificación de transiciones de CSS y la especificación de Web Animations.
Estas curvas Bézier toman cuatro valores o dos pares de números, y en cada par se describen las coordenadas X e Y de los puntos de control de una curva Bézier cúbica. El punto de partida de la curva Bézier tiene coordenadas (0, 0) y el punto final tiene coordenadas (1, 1); puedes configurar los valores X e Y de los dos puntos de control. Los valores X para los dos puntos de control deben estar entre 0 y 1, y el valor Y de cada punto de control puede exceder el límite [0, 1], aunque en las especificaciones no se aclara en qué medida.
Cambiar los valores X e Y de cada punto de control genera una curva muy distinta y, por lo tanto, tu animación tiene una apariencia muy distinta. Por ejemplo, si el primer punto de control se encuentra en el área inferior derecha, la animación será lenta al inicio. Si se encuentra en el área superior izquierda, será rápido al inicio. Por el contrario, si el segundo punto de control se encuentra en el área inferior derecha de la cuadrícula, será rápido al final; si se encuentra en la parte superior izquierda, el final será lento.
A modo de comparación, presentamos dos curvas: una típica de entrada y salida lentas y una personalizada:
Cómo ver una animación con aceleración personalizada
La CSS para la curva personalizada es la siguiente:
transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
Los dos primeros números son las coordenadas X e Y del primer punto de control, y los dos segundos números son las coordenadas X e Y del segundo punto de control.
Crear una curva personalizada es muy divertido y te da un control significativo sobre el aspecto de la animación. Por ejemplo, dada la curva anterior, puedes ver que la curva se asemeja a una curva clásica de entrada y salida lenta, pero con una entrada lenta abreviada, o una parte de “inicio”, y una demora más larga al final.
Experimenta con esta herramienta de curva de animación y observa cómo la curva afecta la apariencia de una animación.
Usa frameworks de JavaScript para tener un mayor control
A veces, necesitas incluso más control del que puede proporcionar una curva Bézier cúbica. Si deseas una apariencia de rebote elástica, puedes considerar el uso de un framework de JavaScript, porque se trata de un efecto difícil de lograr con CSS o animaciones web.
TweenMax
Un marco de trabajo muy útil es TweenMax de GreenSock (o TweenLite si deseas que todo sea bastante liviano), ya que este tiene mucho control en una pequeña biblioteca de JavaScript y es una base de código muy madura.
Cómo ver una animación de aceleración elástica
Para usar TweenMax, incluye la siguiente secuencia de comandos en tu página:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
Una vez que se haya implementado la secuencia de comandos, podrás llamar a TweenMax en tu elemento e indicar las propiedades que deseas, junto con la aceleración que desees. Puedes usar muchas opciones de aceleración. En el siguiente código, se usa una salida lenta elástica:
var box = document.getElementById('my-box');
var animationDurationInSeconds = 1.5;
TweenMax.to(box, animationDurationInSeconds, {
x: '100%',
ease: 'Elastic.easeOut'
});
La documentación de TweenMax destaca todas las opciones que tienes aquí, por lo que te recomendamos leerla.