Introduzido
Os temporizadores sempre foram a tecnologia principal da animação JavaScript. A chave para escrever um loop de animação é saber quanto tempo o atraso é apropriado. Por um lado, o intervalo de loop deve ser curto o suficiente para que diferentes efeitos de animação possam parecer suaves e suaves; Por outro lado, o intervalo de loop deve ser longo o suficiente para que o navegador possa renderizar alterações.
A frequência de atualização da maioria dos monitores de computadores é de 60Hz, o que é aproximadamente equivalente a repintar 60 vezes por segundo. A maioria dos navegadores limitará a operação do Redraw para não exceder a frequência do redesenho do monitor, porque, mesmo que exceda essa frequência, a experiência do usuário não melhorará. Portanto, o intervalo de loop ideal para a animação mais suave é de 1000ms/60, que é aproximadamente igual a 16,6ms
E o problema com o setTimeout e o setInterval é que eles também não são precisos. Seu mecanismo de corrida intrínseco determina que os parâmetros de intervalo de tempo realmente especificam quanto tempo adicionar código de animação à fila do thread da interface do usuário do navegador aguardam a execução. Se outras tarefas forem adicionadas à fila, o código de animação deve esperar até que as tarefas anteriores sejam concluídas antes de executá -las.
O RequestanimationFrame usa intervalos de tempo do sistema para manter a melhor eficiência do desenho e não atrapalhará devido ao tempo de intervalo curto, o que aumentará a sobrecarga; O uso de animações também não ficará preso e não é suave, porque o tempo de intervalo é muito longo, para que vários efeitos de animação na web possam ter um mecanismo de atualização unificado, salvando assim os recursos do sistema, melhorando o desempenho do sistema e melhorando os efeitos visuais
Características
【1】 O pedido de requestanimação concentrará todas as operações de DOM em cada quadro, completo em uma única repintura ou reflexão, e o intervalo de tempo de repintura ou reflexão é seguido de perto pela frequência de atualização do navegador
【2】 Em elementos ocultos ou invisíveis, o quadro de requestanimação não será repintado ou refletido, o que obviamente significa menos CPU, GPU e uso de memória
【3】 requestanimationframe é uma API fornecida pelo navegador especificamente para animação. Quando executado, o navegador otimizará automaticamente a chamada do método. Se a página não estiver ativada, a animação vai pausar automaticamente, salvando efetivamente a sobrecarga da CPU
usar
O uso do RequestanimationFrame é muito semelhante ao setTimeout, exceto que não há necessidade de definir o intervalo de tempo. O pedido de requestanimationFRame usa uma função de retorno de chamada como um parâmetro, chamado antes que o navegador se repita. Ele retorna um número inteiro que representa o número do timer, que pode ser passado para cancelar o quadro para cancelar a execução desta função
requestId = requestanimationframe (retorno de chamada); // Saídas do console 1 e 0Var Timer = requestanimationFrame (function () {console.log (0);}); console.log (timer); // 1 CancelanimationFrame é usado para cancelar o timer // saídas de console nada var timer = requestanimationframe (function () {console.log (0);}); cancelanimationframe (timer);Você também pode usar o valor de retorno para cancelá -lo diretamente
var timer = requestanimationframe (function () {console.log (0);}); cancelanimationframe (1);compatível
IE9-Browser não suporta esse método, você pode usar o setTimeout para compatibilidade
if (! window.requestanimationframe) {var lastTime = 0; window.requestanimationframe = function (retorno de chamada) {var currtime = new date (). gettime (); var timeTocall = math.max (0,16.7- (currtime - lasttime); = currtime + timetocall; retornar id;}} if (! window.cancelanimationframe) {window.cancelanimationframe = function (id) {cleartimeout (id);};}aplicativo
Agora use os três métodos de setInterval, setTimeout e requestanimationFrame para criar um efeito simples do sistema.
【1】 SetInterval
<div id = "mydiv" style = "cor de fundo: lightblue; largura: 0; altura: 20px; altura da linha: 20px;"> 0%</div> <botão id = "btn"> run </button> <s script> var timer; btn.onClick = function () {clearInterval (timer); setInterval (function () {if (parseint (mydiv.style.width) <500) {mydiv.style.width = parseint (mydiv.style.width) + 5 + 'px'; }, 16);} </script>【2】 setTimeout
<div id = "mydiv" style = "background-color: Lightblue; largura: 0; altura: 20px; altura da linha: 20px;"> 0%</div> <botão id = "btn"> run </button> <sCript> var timer; btn.onClick = function () {cleartimeout (timer); fn () {if (parseint (mydiv.style.width) <500) {mydiv.style.width = parseint (mydiv.style.width) + 5 + 'px'; setTimeout (fn, 16);} else {cleartimeout (timer);}}, 16);} </sCript>【3】 requestanimationframe
<div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div><button id="btn">run</button><script>var timer;btn.onclick = function(){myDiv.style.width = '0';cancelAnimationFrame(timer);timer = requestanimationframe (função fn () {if (parseInt (mydiv.style.width) <500) {mydiv.style.width = parseint (mydiv.style.width) + 5 + 'px'; requestanimationframe (fn);} else {cancelanimationframe (timer);}});} </script>Ok, o código está aqui para introduzir o terceiro aplicativo do timer na série BOM (relógio, contagem regressiva, cronômetro e despertador)
O acima é o segundo timer requestanimationframe da série BOM apresentada a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!