`requestAnimationFrame` în JavaScript

Fereastra și navigarea Toate browserele moderne

Rulează o funcție chiar înainte de următoarea redesenare a ecranului; baza animațiilor fluide.

Sintaxă

const id = requestAnimationFrame((timp) => { ... });
cancelAnimationFrame(id)

Ce face `requestAnimationFrame`

requestAnimationFrame programează funcția o singură dată, sincronizată cu ecranul (de obicei de 60 de ori pe secundă). Pentru o animație continuă, funcția se programează din nou pe ea însăși. Primește un timp în milisecunde, util pentru a calcula cât s-a mișcat ceva.

Spre deosebire de setInterval, se oprește automat când fila nu este vizibilă, ceea ce economisește bateria. cancelAnimationFrame(id) anulează o programare.

Parametri

Parametru	Descriere
`functie`	Primește timpul curent (`DOMHighResTimeStamp`).

Ce returnează

Un id, folosit la cancelAnimationFrame.

Exemple

Exemplul 1: O bară de progres animată 2 secunde

Pe un ecran de 60 Hz; pe unul de 120 Hz, numărul de cadre se dublează.

const bara = document.querySelector(".progres");
let inceput = null;
let cadre = 0;

function pas(timp) {
  inceput ??= timp;
  const procent = Math.min((timp - inceput) / 2000, 1);
  bara.style.width = `${procent * 100}%`;
  cadre++;
  if (procent < 1) requestAnimationFrame(pas);
  else console.log("gata după", cadre, "cadre");
}
requestAnimationFrame(pas);

Rezultat în browser

gata după 121 cadre

Exemplul 2: Anulare

const id = requestAnimationFrame(() => console.log("nu apare"));
cancelAnimationFrame(id);
console.log("anulat", typeof id);