requestAnimationFrame è un metodo nativo del browser che permette di eseguire una funzione prima del prossimo repaint. È pensato appositamente per l'esecuzione di animazioni, sincronizzate anche con il refresh rate dello schermo.

Un'animazione gestita da requestAnimationFrame è fluida e priva di tearing, un'effetto tipico degli schermi, visibile su elementi in movimento. Inoltre, se durante l'animazione, l'elemento viene nascosto dall'interfaccia, il processo termina, consentendo di risparmiare risorse.

L'utilizzo di requestAnimationFrame è in contrapposizione rispetto a setTimeout o setInterval in quanto, questi ultimi, anche se capaci delle medesime operazioni, non sono performanti e proseguono l'animazione anche quando l'elemento è nascosto rispetto alla sezione di pagina mostrata.

<div id="box" style="width: 50px; height: 50px; background: red; position: absolute;"></div>

<script>
  const box = document.getElementById('box');
  let pos = 0;

  function moveBox() {
    pos += 2;
    box.style.transform = `translateX(${pos}px)`;
    if (pos < 300) {
      requestAnimationFrame(moveBox);
    }
  }

  requestAnimationFrame(moveBox);
</script>

In questo esempio vediamo in azione requestAnimationFrame che provvederà a spostare il box fintanto che la posizione è minore di 300. L'animazione può anche essere continuativa, iniziare al caricamento della pagina e fermarsi solo quando si esegue una nuova navigazione. In questo caso, se volessimo dare all'utente la possibilità di interromperla, basterà ricordare l'id dell'animazione e fermarla tramite cancelAnimationFrame, come mostrato di seguito

let animationId;

function start() {

  function animate() {
    // logica animazione
    animationId = requestAnimationFrame(animate);
  }
  animationId = requestAnimationFrame(animate);

}

function stop() {
  cancelAnimationFrame(animationId);
}