Las curvas de béziers en las animaciones CSS: caso Google Chrome

15-10-2015 - Andrés Cruz

Las curvas de béziers en las animaciones CSS: caso Google Chrome

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

Las curvas de béziers las podemos emplear en todo tipos de programas de Procesamiento Digital de Imágenes como GIMP, Photoshop, etc para el trazado de dibujos; sin embargo, las curvas de béziers también son empleadas en distintos programas para crear modelados y animaciones como Blender.

Ya introduciéndonos en el tema que nos compete explicar, qué es la aplicación de las curvas de béziers para describir en cada fase de tiempo la velocidad de una Animaciones en CSS a través del valor cubic-bezier(p1x, p1y, p2x, p2y) aplicable a la propiedad transition-timing-function en CSS.

Las curvas de béziers permiten adaptar la velocidad de la animación css.

Sintaxis de la curva de béziers en CSS

El valor cubic-bezier(p1x, p1y, p2x, p2y) consta de cuatro puntos que son los que forman la curva como podemos ver a continuación:

curva de bézier

Más información sobre la curvas de béziers en: Bézier curve.

Aunque esta entrada no profundizaremos en la construcción de las curvas de béziers que para eso hay abundante material en Internet.

Valores predefinidos Vs cubic-bezier en CSS

En esta sección veremos algunos ejemplo de curvas de béziers y su equivalente con valores predefinidos en la API de CSS; veamos.

(ease) Si la animación inicia lento, luego rápido para luego terminar lentamente: cubic-bezier(0.25,0.1,0.25,1):

curva de bézier - ease

(linear) Si la animación es constante cubic-bezier(0,0,1,1):

curva de bézier - linear

(ease-in) Si la animación inicia lento cubic-bezier(0.42,0,1,1):

curva de bézier - ease-in

(ease-out) Si la animación termina lento cubic-bezier(0,0,0.58,1):

curva de bézier - ease-out

Puedes obtener más información en el siguiente enlace: CSS3 transition-timing-function Property.

Con las curvas de béziers tenemos que establecer valores entre cero y uno y al no emplear un valor ya predefinido como mostramos anteriormente puede resultar un poco más complicado personalizar el comportamiento de las animaciones; para estos casos la gente de Google no echa una mano.

Google Chrome y las curvas de béziers en las animaciones CSS

Google Chrome al igual que muchos navegadores ofrecen una cantidad importante y útiles de herramientas que permiten a los desarrolladores web testear y probar nuevas cosas para sus aplicaciones web; una de estas herramienta la podemos encontrar en la consola de desarrolladores.

Consola desarrollador Google chrome

Al seleccionar nuestro elemento desde la consola que tenga aplicada la propiedad transition-timing-function o en su forma reducida a través de la propiedad animation (en nuestro ejemplo un span):

span animation

Veremos un icono como el siguiente en el tab style:

icono curvas béziers google Chrome.png

Al dar un clic sobre el mismo (según la animación establecida) veremos un panel como el siguiente:

curvas Béziers google Chrome.png

Y al presionar en los nodos podemos alterar la curva de bézier y con ello describir en cada fase de tiempo la velocidad de una Animaciones en CSS:

Nodo de la curvas Béziers google Chrome.png

Esta es sin duda una gran herramienta que permite "jugar" con distintos valores y probar varias combinaciones para así escoger la curva de bézier que más nos guste o se adapte a nuestras necesidades.


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!