RequestAnimationFrame

Question

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

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

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

假设函数每秒运行 60 次是否可以？似乎......对我来说不明智。 Mozilla 说 "The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per W3C recommendation"，这让我对这个假设感到不舒服。为什么人们使用他们自己的 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);
}

我可能会改变 'stop' 的计算方式，我可能会写一些东西来确保它以 destx 结束，等等，但这是基本格式

显示在 this jsfiddle

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

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

RequestAnimationFrame - should I use the DOMHighResTimeStamp parameter?

javascript

animation