requestAnimationFrame实现动画

感谢上Di_123

已于 2024-08-17 21:24:14 修改

阅读量457

点赞数 9

分类专栏：前端面试题文章标签： html css3

于 2024-01-12 10:21:33 首次发布

本文链接：https://blog.csdn.net/qq_35770417/article/details/135545553

版权

前端面试题专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文介绍了如何利用JavaScript的requestAnimationFrame方法，实现在浏览器中每帧动态增加div元素宽度，直到达到100px，展示了从0到100px的动画过程和requestAnimationFrame的时间间隔记录。

摘要由CSDN通过智能技术生成

实现浏览器在每一帧中，将页面div元素的宽度变长1px，直到宽度达到100px后停止。

我们采用requestAnimationFrame来实现这个功能，关键代码如下：

<div id="div" className={"progress-bar "} style={{ backgroundColor: 'pink' }}>
</div>
<button id="start">开始动画</button >



<script>


    const btn = document.getElementById('start');
    const div = document.getElementById('div');
    let start = 0;
    const allInterval = [];
    const progress = () => {
      div.style.width = div.offsetWidth + 1 + 'px'
      div.innerHTML = (div.offsetWidth) + '%'
      if (div.offsetWidth < 100) {
        const current = Date.now()
        allInterval.push(current - start)
        start = current
        requestAnimationFrame(progress)
      } else {
        console.log(allInterval) // 打印requestAnimationFrame的全部时间间隔
      }
    }
    btn.addEventListener('click', () => {
      div.style.width = 0
      const currrent = Date.now()
      start = currrent
      requestAnimationFrame(progress)
      console.log(allInterval)
    })


</script>

最终的效果如下：