javascript - RequestAnimationFrame - 我应该使用 DOMHighResTimeStamp 参数吗？

Question

我一直在努力研究如何使用 requestAnimationFrame，结果我很困惑。

根据 Mozilla ，如果你有一个名为“step”的动画函数，你用 requestAnimationFrame(step) 调用，step 接受一个毫秒数的参数，一个 DOMHighResTimeStamp 参数。

然而，我在网上看到的关于如何使用 requestAnimationFrame 的每个示例都没有使用这个参数。一些示例坚持认为您可以假设 step 函数将每秒运行 60 次，因此它们根本不使用任何 time 概念。其他人通过使用 new Date(); 将他们自己的“毫秒数”与参数分开 - 我想修改这些示例以改为使用参数很容易。

可以假设该函数每秒运行 60 次吗？似乎......对我来说不明智。 Mozilla 说 “回调的次数通常是每秒 60 次，但通常会根据 W3C 的建议与大多数 Web 浏览器的显示刷新率相匹配”，这让我对这个假设感到不舒服。为什么人们使用他们自己的 new Date() 方法而不是使用参数来获取毫秒数？

Answer 1

好吧，之前还有一些其他的答案和评论，但出于某种原因人们删除了它们。我最终弄清楚了如何正确使用时间戳并发布了一个答案 here

我将答案复制过来:

---

我想我已经为您找到了答案。它基于 this library

首先，我会从该站点获取一个函数

function inOutQuad(n){
    n *= 2;
    if (n < 1) return 0.5 * n * n;
    return - 0.5 * (--n * (n - 2) - 1);
};

然后，我会使用示例代码的修改形式，像这样

function startAnimation(domEl){
    var stop = false;

    // animating x (margin-left) from 20 to 300, for example
    var startx = 20;
    var destx = 300;
    var duration = 1000;
    var start = null;
    var end = null;

    function startAnim(timeStamp) {
        start = timeStamp;
        end = start + duration;
        draw(timeStamp);
    }

    function draw(now) {
        if (stop) return;
        if (now - start >= duration) stop = true;
        var p = (now - start) / duration;
        val = inOutQuad(p);
        var x = startx + (destx - startx) * val;
        $(domEl).css('margin-left', `${x}px`);
        requestAnimationFrame(draw);
    }

    requestAnimationFrame(startAnim);
}

我可能会改变“停止”的计算方式，我可能会写一些东西来确保它在 destx 上结束，等等，但这是基本格式

显示在 this jsfiddle 中

我真的为这个感到骄傲。一段时间以来，我一直想弄清楚这一点。很高兴我有理由这么做。