 |
|
Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Animação, Animações, Técnicas de Animação |
|
Como criar animações em HTML5 + JavaScript usando o método requestAnimationFrame() do objeto windowQuantidade de visualizações: 2024 vezes |
|
|
O método requestAnimationFrame() foi introduzido pela W3C (World Wide Web Consortium) há alguns anos, como forma de padronizar as alternativas que os navegadores mais populares tinham encontrado para tornar as animações mais suaves e sincronizadas com as taxas de redesenho de seus elementos gráficos, evitando o efeito "pisca-pisca" provocado pelos métodos setTimeout() e setInterval() do objeto window. Antes da padronização, porém, o navegador Firefox criou o método window.mozRequestAnimationFrame, o navegador Google Chrome criou o método window.webkitRequestAnimationFrame() e, para tornar as coisas mais complicadas ainda, o Internet Explorer (IE) veio e criou o método msRequestAnimationFrame(). Nem é preciso ser um gênio para imaginar a dor de cabeça que isso gerou, e a quantidade de código necessário para tratar cada navegador individualmente. No momento que escrevo esta dica, todos os navegadores dão suporte ao método window.requestAnimationFrame() da W3C. Dessa forma, a menos que esteja trabalhando com navegadores muito antigos, você não precisará se preocupar com as implementações proprietárias de cada um. Antes da chegada do método requestAnimationFrame(), tínhamos que fazer animações em JavaScript usando os métodos setTimeout() e setInterval(), definindo um tempo em milisegundos para a chamada de alguma função. Isso gerava um efeito desagradável aos olhos, pois nem sempre o tempo de atualização de nossas animações combinava com o momento de redesenho proporcionado pelo navegador. Por isso era comum o efeito "pisca-pisca". Ao usarmos o método requestAnimationFrame() nós obtemos duas vantagens: 1) A atualizações dos elementos de nossas animações é feita em sincronia com o redesenho proporcionado pelo navegador, a saber, 60 frames por segundo; 2) A função de callback definida em nossos códigos não é chamada quando a aba na qual a animação está contida estiver invisível, o que ajuda a poupar recursos e processamento. Então, depois dessa introdução teórica, vamos ver um exemplo. Veja a seguir um trecho de código que mistura e exibe as palavras de uma frase (que na verdade é apenas nomes de linguagens de programação) a cada vez que a função de callback é chamada pelo método requestAnimationFrame():
Abra esta página HTML no seu navegador e veja o resultado. Você perceberá que as palavras da frase são embaralhadas e animadas de forma suave, sem o efeito "pisca-pisca" que mencionei anteriormente. Observe também que coloquei um contador para diminuir a velocidade da animação. Esse é um recurso que usamos com muita frequência na programação de jogos usando HTML5 e JavaScript. Mas há mais coisas sobre o método requestAnimationFrame(). Não deixe de acompanhar as dicas dessa seção para aprender mais. |
|
 Link para compartilhar na Internet ou com seus amigos: |
|
Veja mais Dicas e truques de HTML5 |
Dicas e truques de outras linguagens |
|
C - Como ler o conteúdo de um arquivo um caractere de cada vez usando a função fgetc() da linguagem C |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
