HTML 5 – Parte 10 – Animação

Posted on 03/12/2010

3


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 0title>  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. 
              
  2. criei um “timer” para execução do meu procedimento de desenho (init);
    3. 
              
  3. em cada desenho, rotaciono o “canvas” da bolinha em 3 graus (drawBall);
    4. 
              
  4. utilizo o canvas da bolinha como source para o drawImage no meu canvas principal (drawBall).
    5. 
            

            
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:
            

            

              Posted in: Sem categoria