Home Blog Portfólio Projetos Downloads Sobre
Últimas Atualizações


Pelo Mundo
Android Police
Gizmodo
Buscar no blog por: Assinar feed

Como fazer uma simples animação em HTML5

sexta-feira, 23 de agosto de 2013 Tags: Animação HTML5, HTML5, Canvas

Fala galera, blz? Faz um tempo que eu não posto nada e sempre me perguntam como se faz Animação em HTML5.

Vou monstra uma simples animação que vai abrir os olhos de quem está iniciando no HTML5.

O experimento é simples. Desenhar uma bola na tela que movimentará batendo nas bordas.

Exemplo 1
<!DOCTYPE html>
<
html>
 <
head>
  <
title>www.flaviosilva.net</title>
 </
head>
 <
body>
  <
canvas width=400 height=300 id="teste" style="border:1px solid #d3d3d3;">
   
Este Browser não suporta HTML5
  
</canvas>

  <
script>
//Retorna o elemento Canvas
   
function e(n){ return document.getElementById(n)}

//Limpa a tela, desenhando um novo retângulo vazio nesta.
   
function clear(){e("teste").getContext("2d").clearRect(0,0,_width,_height)}

//Define o tamanho da tela
   
var _width window.innerWidth 30;
   var 
_height window.innerHeight -30;

   
e("teste").width _width;
   
e("teste").height _height;

//Cria um número aleatório para desenhar o primeiro circulo;
   
var x=Math.floor((Math.random()*_width/2)+40),
       
y=Math.floor((Math.random()*_height/2)+40);

//Variáveis de incrementação
   
var sx=1sy=1;

//Desenha o primeiro circulo
   
var ctx e("teste").getContext("2d");
   
ctx.beginPath();
   
ctx.arc(sx,sy,40,0,2*Math.PI);
   
ctx.stroke();

//Loop de animação
   
function loop(){
    if(
x>_width-40||x<40)sx*=-1;
    if(
y>_height-40||y<40)sy*=-1;
    
x+=sx;y+=sy
    clear
();
    var 
ctx=e("teste").getContext("2d");
    
ctx.beginPath();
    
ctx.arc(x,y,40,0,2*Math.PI);
    
ctx.stroke();

    
setTimeout("loop()"10)
   }
loop();

  
</script>

 </body>
</html>


Exemplo 2 - Mais de um elemento
<!DOCTYPE html>
<
html>
 <
head>
  <
title>www.flaviosilva.net</title>
 </
head>
 <
body>
  <
canvas width=400 height=300 id="teste" style="border:1px solid #d3d3d3;">
   
Este Browser não suporta HTML5
  
</canvas>

  <
script>
//Retorna o elemento Canvas
   
function e(n){ return document.getElementById(n)}

//Limpa a tela, desenhando um novo retângulo vazio nesta.
   
function clear(){e("teste").getContext("2d").clearRect(0,0,_width,_height)}

//Define o tamanho da tela
   
var _width window.innerWidth 30;
   var 
_height window.innerHeight -30;

   
e("teste").width _width;
   
e("teste").height _height;

//Cria um número aleatório para desenhar o primeiro circulo;
   
var x=Math.floor((Math.random()*_width/2)+40),
       
y=Math.floor((Math.random()*_height/2)+40);

//Variáveis de incrementação
   
var sx=1sy=1;

//Desenha o primeiro circulo
   
var ctx e("teste").getContext("2d");
   
ctx.beginPath();
   
ctx.arc(sx,sy,40,0,2*Math.PI);
   
ctx.stroke();

//Loop de animação
   
function loop(){
    if(
x>_width-40||x<40)sx*=-1;
    if(
y>_height-40||y<40)sy*=-1;
    
x+=sx;y+=sy
    clear
();
    var 
ctx=e("teste").getContext("2d");

    
ctx.beginPath();
    
ctx.arc(x,y,40,0,2*Math.PI);
    
ctx.stroke();

//Adicionando um efeito só para desbloquear a imaginação
    
for(i=.5;i>.0;i-=.2){
     
ctx.beginPath();
     
ctx.arc(x*i,y*i,40*i,0,2*Math.PI);
     
ctx.stroke();
    }

    
setTimeout("loop()"10)
   }
loop();

  
</script>

 </body>
</html>


Lembre-se que HTML5 é suportados em quase todos os navegadores mais conhecido, que estejam atualizados.


Twitter facebook Orkut