Nota: apenas traduzi o texto abaixo e postei aqui.
O método requestAnimationFrame()
informa ao navegador para executar uma callback function antes da próxima "repaint" acontecer.
É particularmente útil ao usar JavaScript para animações e repetir atualizações da IU. Por estar vinculado ao tempo de "repaint" do navegador, produz um efeito mais suave do que usar algo como setInterval()
.
Vejamos como isso funciona.
Criando uma callback function
O método requestAnimationFrame()
aceita um argumento: uma callback function para ser executada.
window.requestAnimationFrame(function () {
console.log('Executou!');
});
A callback function é executada logo antes da próxima vez que o navegador executar uma repaint. Em dispositivos modernos, isso normalmente acontece 60 vezes por segundo.
Animações em loop
O método requestAnimationFrame()
é executado apenas uma vez. Você pode fazer um loop repetidamente usando uma técnica chamada recursão.
Digamos que você queira contar de 0 a 500 e atualizar a IU a cada vez.
Primeiro, usaremos document.querySelector()
para obter o elemento na UI e definiremos um number inicial de 0 .
var counter = document.querySelector('#counter');
var number = 0;
Com esta técnica, em vez de usar uma function anônima com requestAnimationFrame()
, você cria uma named function
.
Para nosso exemplo, criaremos uma function countUp()
que aumenta number em 1
e a definirá como textContent
para o elemento counter
.
var counter = document.querySelector('#counter');
var number = 0;
var countUp = function () {
// Aumenta number em 1
number++;
// Atualiza a UI
counter.textContent = number;
};
Agora, é aqui que entra a recursão.
Dentro da function countUp()
, chamaremos window.requestAnimationFrame()
e passaremos a própria function countUp()
como callback funtion. Isso fará com que ele seja executado novamente antes do próximo "repaint".
var counter = document.querySelector('#counter');
var number = 0;
var countUp = function () {
// Aumenta number em 1
number++;
// Atualiza a UI
counter.textContent = number;
// se o number é menor ou igual a 100000,
// execute ele novamente
if (number <= 100000) {
window.requestAnimationFrame(countUp);
}
};
Por fim, usaremos window.requestAnimationFrame()
para iniciar a animação.
var counter = document.querySelector('#counter');
var number = 0;
var countUp = function () {
// Increase number by 1
number++;
// Update the UI
counter.textContent = number;
// se o number é menor ou igual a 500,
// execute ele novamente
if (number < 500) {
window.requestAnimationFrame(countUp);
}
};
// Começa a animação
window.requestAnimationFrame(countUp);
Cancelando requestAnimationFrame()
Se você atribuir seu método requestAnimationFrame()
a uma variável, poderá usar o método cancelAnimationFrame()
para cancelá-lo antes de ser executado.
// Configura a animação
var animation = window.requestAnimationFrame(function () {
console.log('ran!');
});
// Cancela ela
window.cancelAnimationFrame(animation);
Nesta demonstração , a callback function nunca é executada.
Compatibilidade do navegador
O método requestAnimationFrame()
funciona em todos os navegadores modernos e até o IE 10. Você pode enviar o suporte de volta ao IE6 com um polyfill.
Fonte
Newsletter de Go Make Things
Top comments (0)