开发者社区彭世瑜的博客文章正文

requestAnimationFrame实现浏览器动画

2023-04-13 78

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： requestAnimationFrame实现浏览器动画

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

来自MDN的中文文档原文：

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

语法

window.requestAnimationFrame(callback);

代码示例

<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>