Eloquent Javascript: DOM 动画片段

Question

我试图了解 Eloquent Javascript: The Document Object Model (Chapter 13) 中这个小代码示例中发生的所有事情，但我不清楚 "time" 的值究竟在哪里被传递到动画中() 函数在函数本身被传递到 requestAnimationFrame() 之前。我到底错过了什么？

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

Answer 1

没有预先传入。

行 function animate(time) { 没有调用任何东西：相反，它 创建了 一个名为 animate 的函数，它接受一个名为 time.

requestAnimationFrame 的规范声明回调总是传递一个参数，该参数等于自页面首次加载以来的毫秒数（或其分数）。因此 time 不会在函数传递给 requestAnimationFrame 之前传递：相反， 它会在每次 requestAnimationFrame 设置其对回调的调用时传递.

Answer 2

当您执行此行：requestAnimationFrame(animate); 时，函数 animate 将在 requestAnimationFrame 中被调用，并将获得作为参数传递的 time 变量。像这样的东西（狭窄而粗糙）：

function requestAnimationFrame(callback) {
    var time = getTime();
    callback(time); //Where callback is your `animate` function
};

当然 requestAnimationFrame 看起来一点也不像上面的函数，但这只是为了说明 time 的来源。

根据文档：

The callback method is passed a single argument, a DOMHighResTimeStamp, which indicates the current time when callbacks queued by requestAnimationFrame begin to fire. Multiple callbacks in a single frame, therefore, each receive the same timestamp even though time has passed during the computation of every previous callback's workload. This timestamp is a decimal number, in milliseconds, but with a minimal precision of 1ms (1000 µs).

在此处阅读更多内容：https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Eloquent Javascript: DOM 动画片段

Eloquent Javascript: DOM Animation snippet

javascript

recursion

animation

dom

requestanimationframe