requestAnimationFrame实现浏览器动画

中文文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

来自MDN的中文文档原文：

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

语法

window.requestAnimationFrame(callback);

  

 

  
1
 

代码示例

<div id="app"></div>

<script>
  const app = document.getElementById('app')
  let count = 0
  let delay = 0

  function animation() {
    // 跳过某一些帧，让数字的变化能够让人眼识别
    if (delay % 50 == 0) {
      app.innerText = count
      count++
    }
    
    // 循环调用
    window.requestAnimationFrame(animation)
    delay++;
  }

  animation()
</script>

  

 

  
 
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
 

在线Demo: https://mouday.github.io/front-end-demo/requestAnimationFrame.html

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/126207212