💡 概述

requestAnimationFrame (rAF) 是浏览器提供的用于优化动画效果的 API，它会在浏览器下一次重绘之前调用指定的回调函数。这种方式可以确保动画流畅，并且能够自动优化性能。

🛠️ 基本用法

动画

// 开始动画
const animationId = requestAnimationFrame(animate)

function animate() {
  element.style.transform = `translateX(${position}px)`
  position += 2

  // 继续下一帧
  if (animationId > 2000) {
    cancelAnimationFrame(animationId)
  }
  requestAnimationFrame(animate)
}

对比 setInterval

可以看到 setInterval 有些抖动,相较于 requestAnimationFrame 有更平缓的过度