Ingresa al mundo de las animaciones y personaliza la web con jQuery y su método animate.

Una de las partes más divertidas de trabajar con la web es animarla. Por animación no solo entendemos a elementos móviles, sino también elementos que cambian su visibilidad, alterando sus propiedades, ya sea en un tiempo determinado o en reacción a un evento, incluso cambiar el tamaño de un elemento.

La animación web en la actualidad es mucho más predominante a través de JavaScript y con la aparición de jQuery, el manejo de animaciones se ha hecho mucho más sencillo.

En este tutorial, hablaremos sobre el método animate de  jQuery que te permite animar componentes en la web, como mover, coloración y demás opciones.

El método $(“selector”).animate() es una de las armas más elegantes que tiene jQuery para hacer animaciones, pues le permite modificar más de un atributo simultáneamente. Cualquier atributo que utiliza un valor numérico como top, left, height, width, opacity y demás, están disponibles para su manipulación por animate.

Tiene la siguiente sintaxis:

$(selector).animate( properties, [duration] [easing] [complete] );

• Properties, que acepta un objeto con las propiedades a ser animadas.
• Duration, duración de la animación, por defecto es 400 milisegundos.
• Easing, una cadena que indica qué función de aceleración que se va a utilizar para la transición o animación.
• Complete, una función para llamar una vez que la animación es completada. 

En los siguientes ejemplos veremos el uso del método animate de jquery, y cómo de manera fácil se pueden lograr animaciones personalizadas y muy bien desarrolladas.

See the Pen Animación de elemento HTML by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.

En el ejemplo anterior vemos una sencilla animación de un pequeño cuadro, que al dar click sobre el documento, este elemento se mueve hacia la derecha, aquí simplemente actualizamos una de sus propiedades css del cuadrado la cual es left, con una duración de 1000 milisegundos, respondiendo al evento click sobre el documento.

Veamos otro ejemplo:

See the Pen Animación desaparece elemento by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.

En estas animaciones hemos visto cómo mediante una animación, se logra percibir que el elemento va a desaparecer con un efecto de movimiento y opacidad, para lo cual hemos utilizado, un cambio de opacidad, tamaño, movimiento a la derecha y con una duración de un segundo al dar click sobre el elemento. De esta manera, muy sencilla, podrás realizar la animación.

Por último, veamos un ejemplo primitivo de el divertido juego space invaders que a través del teclado se ve la animación de una imagen que hace las veces de nave y logra disparar un laser tratando de eliminar al invasor, veamos:

See the Pen Space invader by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.

En este ejemplo vemos una sencilla animación muy primitiva de space invaders donde a través de animaciones vemos como se desarrollar el juego. También tenemos el uso de diferentes métodos jQuery, además del manejo del teclado, la idea del juego es simple, la nave se puede mover a la derecha o izquierda a través de las techas con la misma dirección y cuando presionas hacia arriba, se disparará un laser hacia el enemigo, así terminando el juego.

Bien, estos son ejemplos donde vemos el manejo de animaciones. Si deseas saber más sobre el manejo de animate y otros métodos jQuery, te invito a nuestros cursos jQuery y JavaScript donde podrás encontrar mucha más información del mundo JS. ¡No te olvides! El día de hoy tenemos una nueva edición de Devcode TV, donde se mostrará el manejo de animaciones en jQuery te esperamos.