DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
15-10-2015

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.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Flat Module con puro CSS

Flat Module con puro CSS

Triangulo 3D animado con CSS

Triangulo 3D animado con CSS

Colourlovers: Paletas de colores lista para el diseño web

Colourlovers: Paletas de colores lista para el diseño web

Algunos artículos que te pueden interesar

Efecto de texto neon con solo CSS

Efecto de texto neon con solo CSS

Se explica cómo crear un sencillo efecto neón con CSS empleando la propiedad text-shadow.

Andrés Cruz 08-09-2017

Uso de cursores con CSS

Uso de cursores con CSS

Con la propiedad cursor que veremos a continuación podemos cambiar el aspecto del cursor sobre ciertos elementos en nuestra web.

Andrés Cruz 22-08-2013

Creando un loader animado con solo CSS

Creando un loader animado con solo CSS

Se explica cómo crear un loader con solo CSS con una sencilla animación.

Andrés Cruz 12-09-2016