requestAnimationFrame实现浏览器动画

简介: 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>

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

相关文章
|
Web App开发 编解码 前端开发
浏览器原理 23 # 分层和合成机制:为什么CSS动画比JavaScript高效?
浏览器原理 23 # 分层和合成机制:为什么CSS动画比JavaScript高效?
429 0
浏览器原理 23 # 分层和合成机制:为什么CSS动画比JavaScript高效?
|
Web App开发 JavaScript 前端开发
从浏览器渲染原理,说一说如何实现高效的动画
从浏览器渲染原理,说一说如何实现高效的动画
364 0
从浏览器渲染原理,说一说如何实现高效的动画
requestAnimationFrame实现浏览器动画
requestAnimationFrame实现浏览器动画
166 0
|
11月前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
239 63
|
11月前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
287 57
|
11月前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
169 5
在浏览器执行js脚本的两种方式