雄辩的Javascript:DOM动画片段

我试图理解在中的这个小代码示例中发生的一切，但在函数本身传递到requestAnimationFrame（）之前，我不清楚“time”的值到底在哪里传递到animate（）函数中。我到底错过了什么

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

var cat=document.querySelector（“img”）；
var angle=0，lastTime=null；
函数动画（时间）{
if（lastTime！=null）
角度+=（时间-上次时间）*0.001；
lastTime=时间；
cat.style.top=（数学sin（角度）*20）+“px”；
cat.style.left=（数学cos（角度）*200）+“px”；
请求动画帧（动画）；
}
请求动画帧（动画）；

事先没有传递它

行

函数animate（time）{

不调用任何东西：相反，它创建了一个名为

animate

的函数，该函数包含一个名为

time

的参数

---

requestAnimationFrame

的规范规定，回调总是传递一个参数，该参数等于毫秒数（或其分数）自从第一次加载页面以来，

time

在函数被传递到

requestAnimationFrame

之前不会被传递进来：相反，当您执行这一行时，每次

requestAnimationFrame

设置它对回调的调用时，它都会被传递进来：

requestAnimationFrame（animate）；

，函数

animate

将在

requestAnimationFrame

内调用，并将

time

变量作为参数传递。类似于以下内容（缩小和粗略）：

当然，

requestAnimationFrame

看起来一点也不像上面的函数，但这只是为了说明

time

的来源

根据文件：

回调方法传递一个参数，即 DOMHighResTimeStamp，指示回调的当前时间 已按requestAnimationFrame排队开始激发。一个队列中有多个回调 因此，每个帧接收相同的时间戳，即使 在计算以前每个回调函数的过程中，时间已经过去了 工作负载。此时间戳是十进制数，以毫秒为单位，但 最小精度为1ms（1000µs）

---

此处阅读更多信息：

时间将由的实现提供。感谢您的快速响应。因此我查找了它。为了确保我理解正确，requestAnimationFrame传入回调的是DOMHighResTimeStamp，对吗？它传入了DOMHighResTimeStamp吗？我只是想确保我理解清楚ly.到目前为止，感谢您的帮助。它正在传入
DOMHighResTimeStamp
，是的。这就是
requestAnimationFrame
传递给回调函数的类型：JavaScript可以用一个普通的旧
数字来实现这一点，但其他语言可能会使用其他语言。不过，这不是回调参数的名称，而是调用back决定名称。好的，知道了。谢谢！很好的示例、解释和源代码参考。我想我现在明白了。谢谢你的时间和努力！没问题。很高兴能提供帮助！
function requestAnimationFrame(callback) {
    var time = getTime();
    callback(time); //Where callback is your `animate` function
};