Animaciones y efectos en HTML5 con Kinetic JS

Este artículo sirve como agregado o extensión de la última entrada sobre Kinetic JS donde hice una introducción a la librería que permite trabajar de forma sencilla con el canvas de HTML5.

Comenté los aspectos básicos así que no voy a detenerme a volver a explicarlos. Me gustaría, eso sí, mostarles algunas animaciones y efectos que pueden realizarse de forma bastante sencilla sin tener demasiados conocimientos de programación.

animacion-html5

Explicaré todo a través de un ejemplo cuyo resultado pueden ver aquí. Y el código fuente completo, aquí.

Empecemos.

Pueden observar el doctype de HTML5, los scripts que vamos a utilizar y la estructura del cuerpo del HTML. El div, como ya expliqué en el artículo anterior, es necesario porque es donde se insertará el canvas.

Dentro del siguiente segmento de código escribiremos nuestro script.

A continuación crearemos el escenario y una capa, con los elementos Kinetic.Stage y Kinetic.Layer.

A continuación vamos a crear un objeto imagen Kinetic.Image.

Primero se crea el objeto imagen común y corriente de HTML. Se le asigna la ruta a una imagen; en mi caso, elegí el simpático logotipo de la extinta cadena de hamburguesas Pumper Nic (que alguna día volverá en forma de fichas). Luego, sí, se crea el objeto Kinetic.Image.

Detengámonos en las opciones de configuración. En image va la variable de la imagen que recién creamos. width y height tienen las dimensiones de la imagen. scale es un modificador del tamaño en x y en y, pero en porcentaje. Sirve para agrandarla o achicarla en las animaciones. Como el objetivo es agrandarla, entonces le puse un 0.8 (un 80% del tamaño original). Por último, alpha se refiere a la opacidad con que aparecerá la imagen al ser dibujado. Como quiero que vaya apareciendo de a poco, elegí ponerle un valor 0 de entrada.

La última instrucción agrega el objeto Kinetic.Image a la capa creada.

Sigamos adelante

Para hacer una animación usaremos el método transitionTo que toma el estado actual del objeto y lo lleva a uno nuevo. Es decir, realiza una transición entre dos estados. El estado actual de la imagen es el que definimos cuando lo creamos. Ahora, definiremos las opciones del estado final.

La transición requiere el parámetro duration que define el tiempo que dura el proceso. Podemos realizar distintas animaciones de acuerdo a las opciones que cambiemos. En este caso, con scale, lo que haremos es escalar la imagen. Como antes tenía 0.8, ahora pasará a 1; esto significa que se agrandará. Lo mismo ocurre con alpha que de 0 pasa a 1, es decir que la imagen irá apareciendo.

¿Cuándo se ejecuta esta animación? De entrada, ni bien se carga el documento.

Ahora veamos otras animaciones sobre el mismo objeto.

Aquí tenemos dos nuevas transiciones. Ambas están metidas dentro de una función setTimeout que sirve para temporizar funciones y es nativa de Javascript. Funciona de la siguiente forma: se le pasa una función y una cantidad de milisegundos. Inmediatamente empieza una cuenta regresiva. Agotados los milisegundos que definimos, dispara la función asociada.

En este caso, se utiliza una función anónima para enmascarar las transiciones. La primera transición se ejecuta a los 2 segundos (2000 ms)  y la tercera a los 4 (4000 ms).

La primera transición hace rotar en 2 pi la imagen. Es decir que hará una vuelta completa, durante 2 segundos. Para eso se usan las opciones rotation y duration.

La segunda transición desplaza en x la imagen hasta la posición 700, es decir, fuera del recuadro del canvas. Esto lo hace durante 3 segundos.

Finalmente hay que insertar la capa en el escenario y dibujar todo.

Les recomiendo que repasen el código y le hagan modificaciones. Esa puede ser una buena forma de entrar en contacto y empezar a aprender a hacer animaciones en HTML5 con Kinetic JS.

Espero que les sirva. Nos reecontramos en otro artículo.

Soy programador web y me desempeño como Líder Técnico y de Proyectos en Polar Bear Development. Trabajo con tecnologías como PHP, Javascript, MySQL y HTML5 para el desarrollo de sitios y sistemas web. Me especializo en Zend Framework 2 y otros frameworks MVC, como también en WordPress y otros CMS. Lidero equipos de desarrolladores trabajando con Scrum. Vivo en Buenos Aires, Argentina.
 

2 thoughts on “Animaciones y efectos en HTML5 con Kinetic JS

  1. hola que tal me ha gustado tu trabajo y espero poder hacerte esta pregunta lo que pasa es que no se como hacer para mostrar una imagen cuando yo pulse un boton he buscado pero la verdad no he encontrado la menra la pude hacer con javascript normal pero no se como hacerla con la libreria kineticjs

  2. Hay que utilizar los eventos de Kinetic JS, aquí te dejo la página con un tutorial de la web oficial. Pero antes que hagas ningún desarrollo, te recomiendo que pruebes el ejemplo del tutorial en los navegadores porque yo le he encontrado algunos bugs a esta librería, especialmente con este tema de eventos e imágenes. Hasta hace un tiempo Firefox tenía inconvenientes con esto mismo. No sé si ya se ha solucionado.

    ¡Gracias por tu comentario!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*