Animación Básica utilizando el Cavas de HTML5

Posteado el 02. Oct, 2012 por tuto in Desarrollo Web, HTML y CSS, HTML5

Con la concepción de lo que hoy en día llamamos HTML5, los browsers han ganado muchas herramientas para proveer una mejor experiencia de usuario.

El canvas, sin duda alguna, es la característica más marketinera que propone este “estándar”, permitiendo generar visualizaciones complejas de manera nativa. Existen en la web algunos ejemplos espectaculares que demuestran el gran potencial que tiene esta característica, tanto en dos dimensiones como en tres.

A diferencia de otros modos de render disponibles en el browser (DOM y SVG) el canvas no dispone de una persistencia de estado más allá del aspecto visual que presenta, lo cual implica la ausencia absoluta de referencias de que y donde dibujamos.

Animación Básica.

En una definición simple, podríamos decir que una animación, es ni más ni menos que un conjunto de cuadros (imágenes) que se suceden con un intervalo dado generando la impresión de movimiento.

Esta idea no cambia cuando hablamos de animación utilizando canvas, idea que aplicaremos en un pequeño ejemplo, en el cual desplazaremos un cuadrado por el canvas.

Para este primer ejemplo, primeramente vamos a generar nuestro HTML, que contendrá el canvas sobre el cual dibujaremos:

Code block

<canvas ID="canvas" width="100" height="100"></canvas>

Para hacerlo más visible a nuestros queridos ojos con respecto al background, vamos a darle un borde y margen:

Code block

canvas { border: solid 1px #ccc; margin: 20px; }

En este primer ejemplo vamos a generarlo en 24 frames por segundo (fps), que resulta lo suficientemente fluido a la vista y no requiere mayor complejidad.

Code block

// Nuestro código de inicialización irá aquí
setInterval(function() {
    // ... la magia sucede aqui
}, 1000 / 24);

Luego, para dar vida a esta animación, completamos la lógica:

Code block

// Nuestras variables
var canvas, ctx, x, y;
 
// Obtenemos una referencia al canvas
 
canvas = document.getElementById('canvas');
 
// Y a su contexto 2d
ctx = canvas.getContext('2d');
 
// Generamos las coordenadas iniciales
x = 0;
y = 0;
 
// Los frames seran renderizados por este intervalo
 
// aproximadamente a 24 frames por segundo (fps)
setInterval(function() {
   // Limpiamos el canvas, eliminando el contenido
   // desde el punto (0, 0) al punto (100, 100)
   ctx.clearRect(0, 0, 100, 100);
 
   // Generamos nuevas coordenadas
   // Que basicamente representan un desplazamiento lineal
   x = x >= 100 ? 0 : x + 1;
   y = y >= 100 ? 0 : y + 1;
 
   // Y dibujamos nuestra figura
   ctx.fillRect(x, y, 50, 50);
}, 1000 / 24);

Utilizando Imágenes

Por suerte para nosotros, canvas provee métodos para trabajar con imágenes, lo cual además de generar hermosos backgrounds e imágenes estáticas nos permite utilizar “sprites”.

En este caso, utilizaremos un sprite que contiene las gráficas de distintos estados de movimiento de un personaje:

Personaje

El background:

Code block

canvas {
    background-color: #eee;
 
    background-image: -webkit-linear-gradient(45deg, black 25%, 
transparent 25%, transparent 75%, black 75%, black), 
-webkit-linear-gradient(45deg, black 25%, transparent 25%, 
transparent 75%, black 75%, black);
 
    background-image: -moz-linear-gradient(45deg, black 25%, 
transparent 25%, transparent 75%, black 75%, black), 
-moz-linear-gradient(45deg, black 25%, transparent 25%, 
transparent 75%, black 75%, black);
    background-image: linear-gradient(45deg, black 25%, transparent 25%, 
transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, 
transparent 25%, transparent 75%, black 75%, black);
 
    background-size:60px 60px;
    background-position:0 0, 30px 30px
}

El código, nuevamente es bastante sencillo, siendo básicamente una función que es llamada en cada iteracción, calculando la posición y frame a dibujar:

Code block

// Nuestras variables
var canvas, ctx, img, x, y, step, direction;
 
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
img = document.getElementById('img');
 
// La posición x inicial, variara con cada paso
x = 0;
// La posición y inicial, quedará estática
y = 25;
 
// Numerador de paso, lo usaremos para saber que frame dibujar
step = 0;
 
// Direccion, 1 derecha, -1 izquierda
direction = 1;
 
setInterval(function() {
    // Borramos lo dibujado
    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
    // Dibujamos el frame adecuado en la posicion correspondiente
    ctx.drawImage(
        // Imagen
        img,
        // Source x
        (step++ % 4) * 32, // Avance sobre el eje x
        // Source y
        [52, 0, 104][direction + 1], // Selecciona el frame adecuado
        // Source width
        32,
        // Source height
        52,
        // Dest x
        x,
        // Dest y
        y,
        // Dest width
        32,
        // Dest height
        52
    );
 
    // Avance, indistinto de la direccion
    x += 5 * direction;
 
    // Si toca un limite, cambiamos la dirección
    if (x >= canvas.width - 32 || x <= 0) {
        direction = -direction;
    }
}, 1000 / 12); // Aproximadamente 12 frames por segundo

Nuestro ejemplo quedará de la siguiente manera:

Animación HTML5

Articulos relacionados:

Tags: css3, html5

Una respuesta para “Animación Básica utilizando el Cavas de HTML5”

Bitacoras.com

02. Oct, 2012

Información Bitacoras.com…

Valora en Bitacoras.com: Con la concepción de lo que hoy en día llamamos HTML5, los browsers han ganado muchas herramientas para proveer una mejor experiencia de usuario. El canvas, sin duda alguna, es la característica más marketinera que propon……