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

Calendario de cubo

Calendario de cubo

Efectos hover con CSS

Efectos hover con CSS

Corazón con CSS

Corazón con CSS

Algunos artículos que te pueden interesar

¿Cómo cubrir todo el fondo con una imagen con CSS?

¿Cómo cubrir todo el fondo con una imagen con CSS?

En esta entrada veremos una técnica que permite que una imagen de fondo cubra todo el ancho del navegador web.

Andrés Cruz 16-09-2014

Creando una caja de luz difuminada con CSS

Creando una caja de luz difuminada con CSS

Se explica cómo crear una caja de luz difuminada en fondo y se presentan algunas variantes del experimento.

Andrés Cruz 11-05-2017

anime.js para realizar animaciones con JavaScript

anime.js para realizar animaciones con JavaScript

Se explica cómo usar la librería para animaciones para JavaScript llamada anime.js en base a un sencillo experimento.

Andrés Cruz 24-08-2016