Question

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

根据Mozilla，如果您有一个名为＆＃39; step＆＃39;的动画功能。你用requestAnimationFrame(step)调用，step接受一个毫秒的参数，一个DOMHighResTimeStamp参数。

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

可以假设该功能每秒运行60次吗？似乎......对我来说是不明智的。 Mozilla说＆＃34;回调次数通常是每秒60次，但通常会根据W3C建议＆＃34; 在大多数网络浏览器中与显示器刷新率相匹配，而不是让我对这个假设感到满意。人们有没有理由使用他们自己的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);
}

我可能会改变“停止＆＃39;计算后，我可能会写一些东西，以确保它以destx等结束，但这是基本格式

在this jsfiddle

中显示

我真的为这一个感到自豪。我一直想要解决这个问题。很高兴我有理由。

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

1 个答案: