requestAnimationFrame的使用

最新推荐文章于 2025-04-21 09:29:50 发布

weixin_45724811

最新推荐文章于 2025-04-21 09:29:50 发布

阅读量545

点赞数 4

文章标签： javascript 前端 es6

本文链接：https://blog.youkuaiyun.com/weixin_45724811/article/details/140451937

版权

requestAnimationFrame API

这个api可以实现动画效果

以前我们使用js实现动画是通过setInterval()和setTimeout()来实现的
存在不足：动画不能够很精确的去执行，比如当我们设置的定时器的时间为20毫秒，但是这时候任务队列中的任务并没有执行完，所以浏览器不能在20毫秒时候执行，可能是21毫秒或者22毫秒（当然可以忽略不计），总之就是不够平滑的执行动画，会有卡顿现象

补充： IE8及更早版本的计时器精度为15毫秒左右，IE9及更晚版本和Chrome的计时器精度为4毫秒，Firefox和Safari的计时器精度为10毫秒左右

现在我们用js执行一个动画可以使用requestAnimationFrame API

cancelAnimationFrame API

与setTimeout()类似，requestAnimationFrame()也返回一个请求ID，可以用于通过另一个方法cancelAnimationFrame()来取消重绘任务。

以下是我使用这个API做的一个demo动画

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>暂停动画</button>
  <div id="animationNode"></div>
  <script>
    const element = document.getElementById('animationNode')
    let requestAnimationFrameId;
    element.style.width = '100px'
    element.style.height = '100px'
    element.style.backgroundColor = 'red'
    function updateProgress(timestamp) {
      // 当宽度为500px的时候暂停
      // if (element.style.width != '500px') {
      // 从动画执行到结束5s暂停
      if (timestamp < 5000) {
        element.style.width = parseInt(element.style.width, 10) + 1 + 'px'
        requestAnimationFrameId = window.requestAnimationFrame(updateProgress)
      }
    }
    window.requestAnimationFrame(updateProgress)


    // 暂停动画
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      window.cancelAnimationFrame(requestAnimationFrameId)
    })
  </script>
</body>

</html>