请求动画帧 - 我应该使用DOMHighResTimeStamp参数吗？

Question

我一直在尝试研究如何使用requestAnimationFrame，但最终感到非常困惑。

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

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

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

- TKoL

Answer 1

好的，之前有一些其他的回答和评论，但由于某种原因人们将它们删除了。最终我想出了如何适当地使用时间戳并发布了一个答案在这里

我会复制答案过来：

---

我想我已经为您找到了一个答案。它基于这个库。

首先，我会从那个网站上获取一个函数。

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中展示它。

我对这个感到有点自豪。我一直想弄清楚这个问题已经有一段时间了。很高兴我有一个理由去做。

- TKoL