使用 requestAnimationFrame 实现 JavaScript 动画

什么是 requestAnimationFrame？

requestAnimationFrame() 是一个更加高效和节约资源的浏览器内置函数，它使动画更加流畅和易于控制。

它是一个由浏览器提供的用于以最佳的可用帧速率执行动画的方法，它是使用回调函数在浏览器下一次重新渲染之前调用的。

使用 requestAnimationFrame 的优势

使用 requestAnimationFrame() 有如下优势：

1. 更好的帧速率

requestAnimationFrame() 的帧速率通常比其他动画方法更稳定。它在多个浏览器或设备上都提供相似的帧速率，这使它非常适合动画。

2. 节约资源

由于 requestAnimationFrame() 只在浏览器下一次重新渲染之前调用，因此它比其他动画方法更节省资源。这也意味着它更适合于需要长时间循环动画的情况。

3. 更容易的控制

与其它动画库相比，使用 requestAnimationFrame() 可以更容易地控制动画。您可以在下一帧之前轻松实现剪辑、暂停和重播等功能。

如何使用 requestAnimationFrame

以下是 requestAnimationFrame() 函数的使用方法：

function animate() {
  requestAnimationFrame(animate);
  // 动画逻辑
}

animate();

您只需定义 animate() 函数，然后在函数内使用 requestAnimationFrame() 调用 animate() 函数即可。

在本例中，requestAnimationFrame() 表示在下一次浏览器渲染之前再次调用 animate() 函数。

在 animate() 函数中，您可以使用如下方法更新您的动画内容：

function animate() {
  requestAnimationFrame(animate);

  // 更新动画帧的代码
  
}

requestAnimationFrame 示例

以下是一个简单示例，演示了如何使用 requestAnimationFrame() 实现简单的动画效果：

<div id="box"></div>

<script>
  const box = document.getElementById('box');
  let position = 0;
  
  function animate() {
    requestAnimationFrame(animate);
      
    position += 5;
    box.style.transform = `translateX(${position}px)`;
  }
  
  animate();
</script>

在这个例子中，我们每次移动 box 元素的位置，直到它到达适当的位置。我们使用 requestAnimationFrame() 在下一次渲染之前更新帧，这将导致 box 元素向右移动直到达到边缘。