HTML 5 – Parte 10 – Animação

Publicado em 03/12/2010

8


Olá pessoal, tudo certin?

Meu último post, sobre REST, ficou bastante “denso”. Por isso, resolvi pegar leve hoje. Hoje faremos alguma animação usando HTML5.

Dica: fica muito mais fácil acompanhar pegando o código-fonte;

A idéia é diversão …

Smiley piscando

O que já vimos?

Para você que está chegando agora, veja o que já foi abordado:

Pegando a idéia…

O conceito de animação disponível para Canvas, no HTML5, é muito simples (quase rudimentar). Se há uma área do canvas que se deseja “animar”, devemos fazer o desenho, limpar a área, desenhar novamente e assim vai..

Pintando uma imagem

Animação com HTML é na unha! Basicamente, sobreposição de imagens. Essas imagens podem ser construídas dinamicamente (com as técnicas que mostrei no post anterior) ou totalmente carregadas de uma fonte externa (o que vou fazer hoje).

Observe o código:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>animation 0</title>
 5     <style>
 6         body, canvas
 7         {
 8             margin: 0;
 9             display: block;
10         }
11     </style>
12 </head>
13 <body>
14     <canvas />
15     <script>
16         var x = 150, y = 150;
17         var context = document
18             .querySelector('canvas')
19             .getContext("2d");
20 
21         var WIDTH, HEIGHT;
22         var ballImg;
23 
24         function drawBall(x, y) {
25             context.fillStyle = 'rgb(255,255,255)';
26             context.fillRect(0, 0,
27                 context.canvas.width,
28                 context.canvas.height
29                 );
30             context.drawImage(ballImg, x, y
31                 );
32         }
33 
34         function init() {
35             ballImg = document.createElement('img');
36             ballImg.src = 'ball.png';
37             ballImg.onload = function () {
38                 WIDTH = context.canvas.width = 
39                   window.innerWidth;
40                 HEIGHT = context.canvas.height = 
41                   window.innerHeight;
42                 drawBall(x, y);
43             }
44         }
45         init();
46     </script>
47 </body>
48 </html>

O que eu fiz?

  • criei um objeto canvas;
  • criei um método de inicialização que carrega dinâmicamente uma imagem;
  • redimensiono o canvas para que tenha o tamanho da área útil no browser;
  • com a imagem carregada, desenho-a no canvas.

O resultado, no meu computador ficou assim:

image

Bacana! Mas ainda sem animação….

Fazendo a bola girar

Para dar um pouco mais de graça… vamos fazer a bola girar. Observe:

 1 var x = 150, y = 150;
 2 var context = document
 3    .querySelector('canvas')
 4    .getContext("2d");
 5 
 6 var ballCanvasContext;
 7 
 8 var WIDTH, HEIGHT;
 9 var ballImg;
10 
11 var halfBallSize = 90;
12 var running;
13 
14 function drawBall(x, y) {
15    ballCanvasContext.rotate(Math.PI / 180 * 3);
16    ballCanvasContext.drawImage(
17        ballImg, 0, 0,
18        ballImg.width,
19        ballImg.height,
20        -halfBallSize, -halfBallSize,
21        halfBallSize * 2, halfBallSize * 2
22       );
23 
24    context.fillStyle = 'rgb(255,255,255)';
25    context.fillRect(0, 0,
26        context.canvas.width,
27        context.canvas.height
28        );
29    context.drawImage(ballCanvasContext.canvas, x, y
30        );
31 }
32 
33 function init() {
34    ballImg = document.createElement('img');
35    ballImg.src = 'ball.png';
36    ballImg.onload = function () {
37        var ballCanvas = document.createElement('canvas');
38        ballCanvas.style.display = 'none';
39        document.body.appendChild(ballCanvas);
40        ballCanvas.height = halfBallSize * 2;
41        ballCanvas.width = halfBallSize * 2;
42        ballCanvasContext = ballCanvas.getContext('2d');
43        ballCanvasContext.translate(halfBallSize, halfBallSize);
44        WIDTH = context.canvas.width = window.innerWidth;
45        HEIGHT = context.canvas.height = window.innerHeight;
46        
47        clearInterval(running);
48        running = setInterval(draw, 13);
49    }
50 }
51 
52 function draw() {
53    drawBall(x, y);
54 }
55 
56 init();

O que eu fiz? Bem, vamos por partes…

  1. criei um canvas onde eu processaria “a rotação” da bola. Observe que, para fins de simplicidade na rotação, desloco o ponto de trabalho para o centro do canvas (init);
  2. criei um “timer” para execução do meu procedimento de desenho (init);
  3. em cada desenho, rotaciono o “canvas” da bolinha em 3 graus (drawBall);
  4. utilizo o canvas da bolinha como source para o drawImage no meu canvas principal (drawBall).

Bacana!

Movendo a bolinha pela tela

Vamos fazer a bola rolar pela nossa tela! Smiley de boca aberta

 1 var dx = 2;
 2 var dy = 4;
 3 var rotateDirection = 1;
 4 function draw() {
 5    drawBall(x, y);
 6 
 7    if (x + dx > (WIDTH - (halfBallSize * 2)) || x + dx < 0)
 8        dx = -dx;
 9    if (y + dy > (HEIGHT - (halfBallSize * 2)) || y + dy < 0)
10        dy = -dy;
11    
12    x += dx;
13    y += dy;
14 }

Retirei o código que apaga o desenho anterior. Logo, podemos ver, pelo rastro, o caminho que a bola:

image

 

Dando peso para a bola

Esse movimento seco da bolinha pela tela não ficou dos mais legais… Ela não está se deslocando no vácuo.. Vamos adicionar um efeito… Vamos aumentar gradativamente o peso da bola (dy)..

 1 var dx = 2;
 2 var dy = 4;
 3 var rotateDirection = 1;
 4 function draw() {
 5    drawBall(x, y);
 6 
 7    if (x + dx > (WIDTH - (halfBallSize * 2)) || x + dx < 0)
 8        dx = -dx;
 9    if (y + dy > (HEIGHT - (halfBallSize * 2)) || y + dy < 0)
10        dy = -dy;
11 
12    dy += 0.3;
13    x += dx;
14    y += dy;
15 }

 

O “pulo do gato” está na linha 12

image

Um último ponto que me chateava bastante nesse exemplo era a rotação da bolinha. Ela fica girando sempre para o mesmo lado. O que fazer? Inverter o sentido da bola conforme a direção horizontal (em X). Observe:

1 function drawBall(x, y) {
2    rotateDirection = (dx > 0 ? 1 : -1)
3    ballCanvasContext.rotate(Math.PI / 180 * 3 * rotateDirection);
4    ...
5 }

Pronto e … bacana!

Por hoje, era isso!

Smiley piscando

Etiquetado:
Publicado em: Sem categoria