 |
|
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: 465 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:
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:
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:
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 |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
