Como usar requestAnimationFrame() com vanilla JS

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