什么是requestAnimationFrame-6ren

什么是requestAnimationFrame

转载作者：知者更新时间：2024-03-13 05:48:49

29

4

一、写在前面
随着前端的发展，css已经可以实现很多的动画效果，但是仍然存在很多的动画效果是css无法实现的，比如说页面滚动，通常的解决方案都是我们通过js的setInterval来设置定时器完成动画特效，如下所示。

(function() {
  function updateAnimations() {
    doAnimation1();
    doAnimation2();
  }
  setInterval(updateAnimations, 100);
})();

上面代码实现的功能是每隔100ms都是重新执行回调函数来完成动画效果，然而，使用定时器可能会不可靠的。
二、js中定时器存在的问题
我们使用定时器时，其内部原理是将其放入另一个进程中等待相应的时间，然后再从进程中取出放入任务队列中等待执行，但是存在一个问题，如果等待时间结束后，任务队列中的任务并不为空。此时定时器就会出现误差。详情可以查看微任务和宏任务相关知识

这里的for循环为主程序任务会在定时器之前完成，但是当主程序完成后，时间大概是400ms，时间是远远大于50ms的，所以此时setTimeOut定时器存在问题。

三、requestAnimationFrame api
css来绘制动画效果的好处是浏览器可以计算每一帧的间隔时间，这样用户在看到页面上的动画时，就会感觉非常流畅。但是js实现的动画效果就不同了。也就是如上所示的问题，此时我们引入一个requestAnimation api来帮助我们解决该问题。其作用就是让浏览器流畅的执行动画效果。可以将其理解为专门为实现动画效果的api，通过这个api，可以告诉浏览器某一个js代码要执行动画，浏览器收到通知后，就会运行这些代码的时候进行优化，实现流畅的效果，而不再需要开发人员心烦刷新频率的问题。
使用方法如下：

<!DOCTYPE html>
<html lang="cn">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 110px;
      height: 40px;
      background: red;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script>
    const element = document.getElementById('box');
    function step(timestamp) {
      element.style.width = element.offsetWidth + 1 + 'px'
      if(element.offsetWidth < 1200) {
        requestAnimationFrame(step)
      }
    }
    window.requestAnimationFrame(step);
  </script>
</body>
</html>

requestAnimationFrame接收一个动画执行函数作为参数，并且在函数内部，当满足某一个条件时，进行递归，从而保证动画的流畅展示。
四、兼容性设置

如上图所示该api存在一些兼容性问题。我们可以设置一些polyfill。

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||    // Webkit中此取消方法的名字变了
                                      window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
            var id = window.setTimeout(function() {
                callback(currTime + timeToCall);
            }, timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    }
    if (!window.cancelAnimationFrame) {
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
    }
}());

如果我们需要在一些老版本的浏览器中使用，则可以加上上述代码。

29

4

0

文章推荐： Leetcode刷题(第78题)——子集

文章推荐：手写vue双向数据绑定

文章推荐：难道你一点也不知道 —欧仁·鲍狄埃

文章推荐： JavaScript学习笔记5-变量和字符串的使用

javascript - 如何在不支持 requestAnimationFrame 的浏览器中忽略 requestAnimationFrame
假设我们有一个功能/模块，可以增强网站。所以这并不是真正必要的，它使用 requestAnimationFrame，即 not supported in older browsers比如IE8/9。我
javascript - "requestAnimationFrame"方法无效
“requestAnimationFrame”方法在以下示例中不起作用。控制台不显示任何错误消息。那么这段代码的错误是什么？HTML:
javascript - 在设定的时间后取消 requestAnimationFrame
我有以下 JavaScript: function animate() { // call other function offset += 3; if (offset > 15) offset =
javascript - 使用带有等待时间的 requestAnimationFrame
我有一些基本脚本可以将文本左右滚动，我尝试将其从 timeout 转换为 requestAnimationFrame，但是，我无法制作它有效。 function slideHorizontal(e,
javascript - requestAnimationFrame javascript警报增量从1跳到9或13
我遇到了这个奇怪的问题，我递增了 1，但是，弹出 javascript 窗口时出现的增量显示我已递增了 9 或 13，这两者都来自于我是否分别增加 1 或 -1。这是怎么回事？这是 requestA
javascript - requestAnimationFrame 固定持续时间
我试图了解有关 requestAnimationFrame 的一件事。在下面的示例代码中，我运行了 60 次，这应该与您通常获得的典型每秒 60 帧相匹配，因此它应该持续 1 秒。然而我故意通过调用
javascript - RequestAnimationFrame 在代码中的位置
有人可以分享一下在动画循环中应该在哪里进行 RequestAnimationFrame 调用吗？它应该在循环的开头还是循环的结尾？我已经多次看到它在循环开始时使用它，但是位于循环底部不是更好吗？这样在
javascript - 如何在带有参数的函数内部使用 requestAnimationFrame ？
我尝试为很多 svg 路径设置动画，但功能不起作用错误: Uncaught RangeError: Maximum call stack size exceeded function dashOf
javascript - requestAnimationFrame 在图像在屏幕外移动时表现得很奇怪
我有一张滑动图片沿着屏幕缓慢移动。一旦它们离开屏幕，它们就会背靠背靠在丝带上。因此，当您在网页上时一切正常，但当您离开并且其中一张图像超出范围时。它会被放回错误的地方。我认为这可能与 requestA
javascript - requestAnimationFrame() 性能问题
我在使用 requestAnimationFrame() 时遇到了性能问题。考虑以下代码。这是一个简单的循环，每次时间增量大于 20 毫秒时，都会打印自上一帧以来的时间。 const glob_ti
javascript - requestAnimationFrame - 告诉浏览器何时失去焦点
根据我的阅读，requestAnimationFrame 可以判断浏览器何时失去焦点。发生这种情况时是否会触发某种事件？我正在寻找暂停和恢复与 requestAnimationFrame 相关的代码。
javascript requestAnimationFrame 最终位置永远不准确
let pf = document.querySelectorAll('.pf'); for (let i of pf) { Object.assign(i.style, { left:
javascript - requestAnimationFrame 似乎无效
我最近看了 Jake Archibald 的演讲。他在演讲中举了一个例子，他说使用 requestAnimationFrame 两次来延迟应用 CSS 样式来执行 CSS 动画。参见https://
javascript - 在后台运行 requestAnimationFrame
我正在使用 requestAnimationFrame 为视频流设置动画，我知道请求动画在后台不起作用，所以有什么方法可以让它在后台运行。我知道我们也可以使用 setInterval 或 setTi
javascript - requestAnimationFrame 是如何工作的？
我是编程新手，面对这个功能: function update(time = 0) { console.log(time); requestAnimationFrame(update);
javascript - requestAnimationFrame 在被函数调用之前运行
我正在尝试使用 JavaScript 和 requestAnimationFrame 制作一个简单的计时器(从 0 开始计数)。单击某些内容时，我想从 0 开始计时。目前我的代码在单击按钮时显示计时器
javascript - requestAnimationFrame 处理顺序
如果我有以下代码: window.requestAnimationFrame(animation1); //animation1 takes more than 16.67ms, misses the
JavaScript:requestAnimationFrame 变得更快
我有一个带有 requesetAnimationFrame 的动画，当我重播它时，它变得越来越快，直到它变得不可见。 function tirer(){ var missile=documen
javascript - requestAnimationFrame 的问题
我有一个问题: document.querySelector('div').addEventListener('mousedown', function(){ hello = true
javascript - 如何独立于刷新率计时 requestAnimationFrame()
我有一种情况，我想在 1 秒内将 600px 宽的 div 的宽度设置为 0px。为此，我可以使用 requestAnimationFrame()。但我真的不能 100% 确定动画是否需要 1 秒。

首页

博学

6Ren·AI

商城

什么是requestAnimationFrame