Question

我从eloquent javascript学习javascript并遇到以下代码：

<p style="text-align: center">
  <img src="img/cat.png" style="position: relative">
</p>
<script>
  var cat = document.querySelector("img");
  var angle = 0, lastTime = null;
  function animate(time) {
    if (lastTime != null)
      angle += (time - lastTime) * 0.001;
    lastTime = time;
    cat.style.top = (Math.sin(angle) * 20) + "px";
    cat.style.left = (Math.cos(angle) * 200) + "px";
    requestAnimationFrame(animate);
  }
  requestAnimationFrame(animate);
</script>

来自http://eloquentjavascript.net/13_dom.html的

我不明白时间值是如何在第一次调用动画时获得其值的。似乎requestAnimationFrame正在将时间参数传递给动画，但它如何知道这样做，它从哪里获取参数来自＆gt;

Answer 1

回调方法传递一个参数，一个DOMHighResTimeStamp，它指示requestAnimationFrame排队的回调开始触发的当前时间

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

回调函数中的

动画，浏览器每次重新绘制/刷新页面时都会调用该动画。

通常根据监视器的刷新率（例如60fps）调用函数requestAnimationFrame。因此，每次调用回调函数重绘画布时，它都会设置当前时间。

想象一下requestAnimationFrame的代码在底层框架中是这样的

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

http://creativejs.com/resources/requestanimationframe/给出了关于功能和框架的清晰解释。

requestAnimationFrame将参数传递给它以某种方式传递的函数？

1 个答案: