Em programas de animação de navegador, geralmente usamos um cronômetro para alternar o objeto alvo a cada poucos milissegundos para fazê-lo se mover. Agora, a boa notícia é que os desenvolvedores de navegadores decidiram: ei, por que não fornecemos essa API no navegador para que possamos otimizar suas animações para os usuários? Portanto, esta função requestAnimationFrame() é uma API para efeitos de animação. Você pode usá-la para alterações de estilo no DOM ou animação de tela ou WebGL.
O navegador pode otimizar ações de animação paralelas, reorganizar a sequência de ações de forma mais razoável e concluir ações que podem ser combinadas em um ciclo de renderização, apresentando assim um efeito de animação mais suave. Por exemplo, por meio de requestAnimationFrame(), a animação JS pode ocorrer simultaneamente com animação/transformação CSS ou animação SVG SMIL. Além disso, se você executar uma animação em uma guia do navegador, o navegador irá pausá-la quando a guia não estiver visível, o que reduzirá a pressão na CPU e na memória e economizará bateria.
Uso de requestAnimationFrame // corrigir camada com setTimeout fallbackwindow.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000/60); };} )();// uso:// em vez de setInterval(render, 16) ....(função animloop(){ requestAnimFrame(animloop); render();})();// coloque o rAF *antes* do render() para garantir o mais próximo de // 60fps com o setTimeout substituto.Um encapsulamento mais confiável de requestAnimationFrame
O técnico do navegador Opera, Erik Möller, encapsulou essa função para torná-la mais compatível com vários navegadores. Você pode ler este artigo, mas basicamente o código dele é decidir se deve usar atraso de 4ms ou 16ms para melhor corresponder a 60fps. Abaixo está este código, você pode usá-lo, mas observe que este código usa funções padrão e adicionei prefixos a ele que são compatíveis com vários mecanismos de navegador.
(function() { var lastTime = 0; var vendors = ['webkit', 'moz']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = janela[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = janela[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; max(0, 16 - (currTime - lastTime)); timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id };Deixe-me ver o efeito de usar requestAnimationFrame
API requestAnimationFrame window.requestAnimationFrame(function(/* hora */ hora){ // hora ~= +nova data // a hora unix});Os parâmetros na função de retorno de chamada podem ser passados a tempo.
Suporte de vários navegadores para requestAnimationFrame
Google Chrome, Firefox e IE10+ implementam essa função. Mesmo que seu navegador seja muito antigo, o encapsulamento requestAnimationFrame acima pode tornar esse método livre de erros no IE8/9.