 |
|
||||
 Planilha Web - Planilhas e Calculadoras online para estudantes e profissionais de Engenharia Civil, Engenharia Elétrica e Engenharia Mecânica. |
|||||
Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Animação, Animações, Técnicas de Animação |
Como mover uma bola na superfície do Canvas do HTML5 na horizontal - Para a direita, para a esquerda e rebatendoQuantidade de visualizações: 510 vezes |
|
Nesta dica mostrarei uma técnica básica de animação em JavaScript. Para isso nós vamos usar o objeto Canvas do HTML5 e mover um desenho (uma bolinha) na horizontal. Primeiro vamos movimentá-la da esquerda para a direita, depois da direita para a esquerda e, finalmente, ela vai ficar rebatendo de um lado para o outro da tela. Comece analisando a imagem a seguir:  Agora vamos ao código. Veja a página HTML completa, incluindo o código JavaScript para a animação:
<!doctype html>
<html>
<head>
<title>Desenvolvimento de Games usando HTML5 e
JavaScript</title>
</head>
<body>
<Canvas id="canvas" width="800" height="300"></Canvas>
<script type="text/javascript">
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas");
// obtemos o contexto de desenho
var contexto = canvas.getContext("2d");
// taxa de deslocamento da bola
var taxa_deslocamento = 5;
// posição y da bola
var pos_y = 100;
// posição x da bola
var pos_x = 0;
// função que faz a animação
function animar(){
// a bola já está no limite da margem direita
// do canvas?
if(pos_x < canvas.width){
// incrementa a posição x da bola
pos_x = pos_x + taxa_deslocamento;
// limpamos o canvas
contexto.clearRect(0, 0, canvas.width, canvas.height);
// e desenhamos a bola na nova posição
contexto.fillStyle = "red";
contexto.beginPath();
contexto.arc(pos_x, pos_y, 15, 0, Math.PI * 2, true);
contexto.closePath();
contexto.fill();
// e fazemos uma nova chamada à função animar()
window.requestAnimationFrame(animar);
}
}
// fazemos a primeira chamada à função animar()
window.requestAnimationFrame(animar);
</script>
</body>
</html>
Veja que criamos uma variável chamada taxa_deslocamento que define a quantidade de pixel que o objeto será movido para a direita à cada vez que a função window.requestAnimationFrame() for chamada. Lembre-se de que, em geral, esta função é chamada 60 vezes por segundo (60 frames por segundo). Quanto maior o valor da variável taxa_deslocamento, mais rápido a bolinha se moverá pelo Canvas. A posição pos_y da bola é definida como 100 pixels e não sofrerá alteração, pois estamos movimento o objeto apenas na horizontal. A variável pos_x começa em 0 e é incrementada com o valor da variável taxa_deslocamento. Como estamos aumentando o valor da variável pos_x de forma positiva, a bola se movimentará para a direita. Note também o uso da função clearRect() do Canvas para limpar a superfície do elemento antes de desenharmos a bolinha novamente. Veja agora como podemos movimentar a bolinha da direita para a esquerda:
<!doctype html>
<html>
<head>
<title>Desenvolvimento de Games usando HTML5 e
JavaScript</title>
</head>
<body>
<Canvas id="canvas" width="800" height="300"></Canvas>
<script type="text/javascript">
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas");
// obtemos o contexto de desenho
var contexto = canvas.getContext("2d");
// taxa de deslocamento da bola
var taxa_deslocamento = 5;
// posição y da bola
var pos_y = 100;
// posição x da bola começando do lado direito
var pos_x = canvas.width;
// função que faz a animação
function animar(){
// a bola já está no limite da margem esquerda
// do canvas?
if(pos_x > 0){
// decrementa a posição x da bola
pos_x = pos_x - taxa_deslocamento;
// limpamos o canvas
contexto.clearRect(0, 0, canvas.width, canvas.height);
// e desenhamos a bola na nova posição
contexto.fillStyle = "red";
contexto.beginPath();
contexto.arc(pos_x, pos_y, 15, 0, Math.PI * 2, true);
contexto.closePath();
contexto.fill();
// e fazemos uma nova chamada à função animar()
window.requestAnimationFrame(animar);
}
}
// fazemos a primeira chamada à função animar()
window.requestAnimationFrame(animar);
</script>
</body>
</html>
Veja que agora o valor da variável pos_x é ajustada inicialmente para a largura do Canvas. Então, dentro da chamada à função window.requestAnimationFrame() nós decrementamos o seu valor de acordo com o valor da variável taxa_deslocamento, que controla a velocidade do objeto. Para finalizar, veja o código HTML5 completo que aplica o efeito de rebater na bolinha, na horizontal, é claro:
<!doctype html>
<html>
<head>
<title>Desenvolvimento de Games usando HTML5 e
JavaScript</title>
</head>
<body>
<Canvas id="canvas" width="800" height="300"></Canvas>
<script type="text/javascript">
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas");
// obtemos o contexto de desenho
var contexto = canvas.getContext("2d");
// taxa de deslocamento da bola
var taxa_deslocamento = 5;
// posição y da bola
var pos_y = 100;
// posição x da bola
var pos_x = 0;
// função que faz a animação
function animar(){
// a bolinha alcançou os limites das margens
// direita ou esquerda?
if((pos_x > canvas.width) || (pos_x < 0)){
// muda o sinal da taxa_deslocamento
taxa_deslocamento = taxa_deslocamento * -1;
}
// movimentamos a bolinha
pos_x = pos_x + taxa_deslocamento;
// limpamos o canvas
contexto.clearRect(0, 0, canvas.width, canvas.height);
// e desenhamos a bola na nova posição
contexto.fillStyle = "red";
contexto.beginPath();
contexto.arc(pos_x, pos_y, 15, 0, Math.PI * 2, true);
contexto.closePath();
contexto.fill();
// e fazemos uma nova chamada à função animar()
window.requestAnimationFrame(animar);
}
// fazemos a primeira chamada à função animar()
window.requestAnimationFrame(animar);
</script>
</body>
</html>
Execute este exemplo e veja como a bolinha rebate ao chegar à margem direita ou esquerda do Canvas. O truque aqui foi multiplicar o valor da variável taxa_deslocamento por -1. Em outra dica veremos como movimentar a bola na vertical, ou seja, manipulando a variável y. |
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de HTML5 |
Dicas e truques de outras linguagens |
|
Java - Java Swing - Como obter a quantidade de colunas em uma JTable usando o método getColumnCount() |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
