js requestanimationframe

requestAnimationFrame 是 JavaScript 中的一个 API，用于创建高效、流畅的动画。它的工作原理是告诉浏览器你希望执行一个动画，并要求浏览器在下次屏幕重绘之前调用指定的回调函数来更新动画。以下是 requestAnimationFrame 的一些关键特性和用法：

关键特性

  1. 与屏幕刷新同步 ：requestAnimationFrame 的回调函数会在浏览器下一次重绘之前执行，这样可以确保动画的更新与显示器的刷新率同步，通常为 60 FPS。

  2. 优化性能 ：requestAnimationFrame 会自动根据显示器的刷新率调整调用频率，避免不必要的计算和渲染，从而节省 CPU 和 GPU 资源。

  3. 节能 ：当页面不可见或最小化时，requestAnimationFrame 会暂停执行，进一步减少资源消耗。

  4. 回调函数参数 ：requestAnimationFrame 的回调函数接收一个参数，表示自页面加载以来经过的时间戳(DOMHighResTimeStamp)，这允许动画根据时间进行精确控制。

用法示例

下面是一个使用 requestAnimationFrame 实现简单动画的例子：

const element = document.getElementById('some-element-you-want-to-animate')；
let start；

function step(timestamp) {
  if (start === undefined) start = timestamp；
  const elapsed = timestamp - start；
  // 更新元素位置
  element.style.transform = `translateX(${Math.min(0.1 * elapsed, 200)}px)`；
  // 如果动画未完成，继续调用 requestAnimationFrame
  if (elapsed < 2000) {
    window.requestAnimationFrame(step)；
  }
}

// 启动动画
window.requestAnimationFrame(step)；

在这个例子中，我们定义了一个 step 函数作为 requestAnimationFrame 的回调，该函数会根据经过的时间更新元素的位置，并在动画完成后停止调用 requestAnimationFrame。

总结

requestAnimationFrame 提供了一种与浏览器渲染机制紧密集成的动画实现方式，它能够确保动画的流畅性和性能，同时减少不必要的资源消耗。如果你需要创建动画效果，requestAnimationFrame 是一个非常好的选择

Top
×
×