gacor: Programe actualizaciones visuales con requestAnimationFrame

Un temporizador no sabe cuándo el navegador está a punto de pintar. requestAnimationFrame programa una devolución de llamada antes de un fotograma futuro, lo que lo hace más adecuado para actualizaciones visuales como mover un elemento o dibujar en un lienzo.

let frameId;
let start;

function animate(now) {
  start ??= now;
  const progress = Math.min((now - start) / 400, 1);
  element.style.transform = `translateX(${progress * 120}px)`;
  if (progress < 1) frameId = requestAnimationFrame(animate);
}

frameId = requestAnimationFrame(animate);

Utilice la marca de tiempo, no un paso fijo

• Base el progreso en la marca de tiempo de devolución de llamada para que el movimiento no esté vinculado a una frecuencia de actualización particular.
• Mantenga organizadas las lecturas y escrituras del diseño para evitar el diseño forzado repetido.
• Cancele un fotograma programado con cancelAnimationFrame cuando la animación debería detenerse.

Respetar la preferencia de movimiento del usuario.

Ofrezca una ruta de movimiento reducido para movimientos no esenciales y evite animar contenido que pueda distraer o incomodar la página.

Pruebe con diferentes frecuencias de actualización y cuando una pestaña esté en segundo plano. Los navegadores pueden pausar o acelerar las devoluciones de llamadas de animación cuando una página no está visible.