Como usar requestAnimationFrame() com vanilla JS
Tags: javascript, programming, portugues
Published: 2023-12-12 12:42:31

_**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.

```javascript
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 .

```javascript
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`.

```javascript
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".

```javascript
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.

```javascript
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.

```javascript
// 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](https://gomakethings.com/)