JS使用window.requestAnimationFrame()实现逐帧动画

时间：2023-12-08

下面是详细讲解“JS使用window.requestAnimationFrame()实现逐帧动画”的完整攻略：

什么是window.requestAnimationFrame()

window.requestAnimationFrame()是浏览器提供的一种在下一帧动画前执行的方法，通常用作执行逐帧动画，相比于setTimeout或者setInterval，requestAnimationFrame有以下优势：

requestAnimationFrame在执行前会对回调函数进行校验，如果当前页面处于不可见状态，就会停止执行，从而降低CPU，节省能耗，提高性能。
requestAnimationFrame的执行回调函数与浏览器的渲染频率相匹配，通常每秒60帧，具有更快的动画渲染速度、更平稳的动画效果。

使用window.requestAnimationFrame()实现逐帧动画

要使用requestAnimationFrame实现逐帧动画，需要通过递归调用requestAnimationFrame方法，不断更新下一帧的状态，具体流程如下：

使用requestAnimationFrame()方法注册一个动画帧回调函数，该回调函数负责更新动画状态以及重新注册下一帧的回调函数。
在动画帧回调函数中进行下一帧的状态更新，包括动画元素的位置、颜色、透明度等属性。
继续使用requestAnimationFrame()方法注册下一帧回调函数，形成递归调用的效果。

下面是一个简单的逐帧动画示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>逐帧动画示例</title>
  <style>
  #box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
  }
  </style>
</head>
<body>
  <div id="box"></div>
  <script>
  // 定义动画元素
  var box = document.getElementById('box');
  // 定义动画状态初始值
  var positionX = 0;
  var positionY = 0;
  var stepX = 1;
  var stepY = 1;
  // 定义动画帧回调函数
  function animate() {
    // 更新动画状态
    positionX += stepX;
    positionY += stepY;
    if (positionX > 200 || positionX < 0) stepX = -stepX;
    if (positionY > 200 || positionY < 0) stepY = -stepY;
    // 更新动画元素样式
    box.style.left = positionX + 'px';
    box.style.top = positionY + 'px';
    // 注册下一帧回调函数
    window.requestAnimationFrame(animate);
  }
  // 开始执行逐帧动画
  animate();
  </script>
</body>
</html>

在上面的示例中，我们定义了一个小正方形box，并且每一帧更新box的位置，使它在页面中来回弹动。

requestAnimationFrame的兼容性问题

虽然requestAnimationFrame拥有很强的性能和动画效果，但是它在不同浏览器之间的兼容性并不完美，下面简单列出一些需要注意的兼容性问题：

在Internet Explorer 9或更早版本的IE中，必须使用msRequestAnimationFrame方法。
在Safari 6及以下版本的Safari中，必须使用webkitRequestAnimationFrame方法。
在iOS 6及以下版本的Safari中，也必须使用webkitRequestAnimationFrame方法。

为了解决requestAnimationFrame跨浏览器的兼容性问题，我们通常需要使用requestAnimationFrame的兼容性封装库，比如RAF.js等。

另外需要注意的是，requestAnimationFrame并不是所有场景下都比setTimeout/Interval要好，比如当帧率较低时，使用requestAnimationFrame提高不了性能，反而会出现帧率丢失的问题，这时候可以考虑使用setTimeout或setInterval方法。

上一篇：使用JS实现气泡跟随鼠标移动的动画效果 下一篇：js canvas实现圆形流水动画

JS使用window.requestAnimationFrame()实现逐帧动画

什么是window.requestAnimationFrame()

使用window.requestAnimationFrame()实现逐帧动画

requestAnimationFrame的兼容性问题

相关文章