Cómo hacer transiciones usando la curva de bézier

Hoy vamos a ver cómo hacer transiciones usando la curva de bézier para tener animaciones mucho más llamativas. Con la llegada de las animaciones con CSS se puedo hacer más dinámica las transiciones, teniendo la posibilidad de tener transiciones lineales, y de tipo ease. Pero resulta que hay otro tipo de animación, una un poco más compleja pero no por eso más difícil de aprender, se llama la curva de Bézier.

La curva de Bézier es un sistema de 4 puntos que permiten hacer curvas mucho más suaves basándose sólo en líneas rectas. Se usa en ingeniería y diseño, pero para aterrizarlo más a nuestro ambiente lo podemos ver en programas como Photoshop, llustrator o Flash al usar la pluma para dibujar vectores basados justamente en eso, en líneas rectas.

Ver Demo

 

Teoría

La gráfica de arriba representa la curva de Bézier, tenemos 4 puntos: P0, P1, P2 y P3. en un principio P0 y P3 son estáticos, ya que representan tanto el inicio que es (0,0) como el final (1,1). La curva de Bézier en CSS sólo puede tomar valores de 0 a 1 por lo que valores superiores hará que se reseteé la animación a una lineal.

Para alterar la curva basta mover los P1 y P2, ya que estas dos controlan como se comporta la curva total. Para definir la cirva de Béxier necesitamos 4 valores:

• La posición en X y Y del punto P1
• La posición en X y Y del punto P2

Ejemplos

Para entender mejor cómo funciona veamos algunos ejemplos:

En este ejemplo la curva de Bézier es (0, 1, 1, 0) ya que el P1 está en 0 en el eje X y 1 en el eje Y. El punto P2 tiene 1 en el eje X y 0 en el eje Y.

La curva de Bézier es (0, 0, 0, 1)

Podemos crear cosas un poco más complejas,como este, donde la curva de Bézier es (1, .83, 0, .57)

CSS

Ya que hemos comprendido cómo funciona la curva de Bézier y los valores que necesitamos para generar la curva basta ver cómo traducimos eso a CSS para nuestras animaciones.

Aplicamos la curva como si fuera una transición, a excepción de que cuando especificamos el tipo de transición mencionamos que queremos la curva de Bézier e introducimos los valores que queremos para la curva.

Herramientas

Si se dan cuenta en realidad colocar una curva de Bézier en código no es difícil, el problema radica en saber cuál va a ser el resultado de aplicar una curva de Bézier, ya que se puede aplicar los puntos básicos, pero si queremos un efecto diferente tenemos que recurrir a otras herramientas.

 

En el blog de roblaplaca hay un simulador de curva de Bézier en el que podemos configurar nuestras cuervas y obtener el código para ponerlo en nuestro sitio. También podemos configurar las demás animaciones pero en general si buscan configurar las de Bézier esta herramienta es la que más les recomiendo.

Conclusiones

Como ya vieron usar curvas de Bézier es muy sencillo y una vez que sabemos como funciona en la parte teórica podemos pasar a la práctica y configurar nuestras animaciones con efectos mucho más atractivos que los clásicos movimientos lineales.