 |
|
||||
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: 1991 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():
<!doctype html>
<html>
<head>
<title>Desenvolvimento de Games usando HTML5 e JavaScript</title>
</head>
<body>
<Canvas id="canvas" width="400" height="200"></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");
// serve para controlarmos o redesenho do canvas
var contador = -1;
// função personalizada que permite embaralhar a
// ordem dos elementos de um array
function embaralhar(vetor) {
vetor.sort(() => Math.random() - 0.5);
}
// função que faz a animação
function animar(){
// é a primeira chamada ou já se passaram 50 frames
if((contador == -1) || (contador > 50)){
// a frase cujas palavras serão exibidas
var frase = "HTML5 Java Python Delphi C/C++ CSS";
// vamos dividir a frase em palavras
var partes = frase.split(" ");
// agora embaralhamos as palavras
embaralhar(partes);
// e as juntamos de volta
frase = partes.join(" ");
// limpamos toda a área de desenho
contexto.clearRect(0, 0, canvas.width, canvas.height);
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 |
|
Portugol - Como resolver uma equação do segundo grau em Portugol - Como calcular Bhaskara em Portugol |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
