requestAnimationFrame 使用

发布于 2023-05-12 09:02:10 字数 2245 浏览 36 评论 0

一、requestAnimationFrame

从 MDN 介绍可知：调用 window.requestAnimationFrame() 方法告知浏览器，希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。

从这句话可以看出，它相比 setTimeout 等 API 的优势之一是减少 DOM 重绘的次数。

语法也很简单：

window.requestAnimationFrame(callback)

它接受一个回调函数（即下一次重绘之前更新动画帧所调用的函数），并返回一个非零且唯一的 requestId（可以传给 window.cancelAnimationFrame() 以取消回调函数）。

回调函数将会被传入一个 DOMHighResTimeStamp 参数，表示 requestAnimationFrame() 开始去执行回调函数的时刻。

看一下 MDN 给出的一个示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #foo {
        width: 100px;
        height: 100px;
        background-color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      let start
      const element = document.getElementById('foo')

      function step(timestamp) {
        if (start === undefined) start = timestamp
        const elapsed = timestamp - start

        // 这里使用 `Math.min()` 确保元素刚好停在 200px 的位置。
        element.style.transform = `translateX(${Math.min(0.1 * elapsed, 200)}px)`

        if (elapsed < 2000) {
          // 在两秒后停止动画
          window.requestAnimationFrame(step)
        }
      }

      window.requestAnimationFrame(step)
    </script>
  </body>
</html>

效果可看下

分享到QQ

分享到微博