requestAnimationFrame实现浏览器动画
  TEZNKK3IfmPf 2023年11月15日 170 0

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

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月15日 0

暂无评论

推荐阅读
TEZNKK3IfmPf