Question

在动画中我需要时间精度分为几步。

进度条的宽度每100毫秒增加20像素。我使用jQuery的animate()来设置宽度的动画。

记录Date.now()，很明显时间会发生变化而且不准确。

function animateProgress() {
    console.log(Date.now() - progressTime);
    progressTime = Date.now();

    progress_width = $(progress).width();

    if (progress_width < progressLimit) {
        $(progress).animate(
            { width: '+=20' }, '' + progressTime, "linear", animateProgress
        );
    }
}

我一直reading about requestAnimationFrame，我猜这是正确的方式;如何将上述函数转换为使用requestAnimationFrame，或以其他方式实现精确计时？

Answer 1

您不需要requestAnimationFrame。请改为使用转换setInterval：

var progressBar = document.getElementById("progress");
var start = new Date();

var timer = setInterval(function() {
    var t = new Date() - start;

    if (t < 500) {
        progressBar.style.width = (t * 20 / 100 | 0) + "px";
    } else {
        progressBar.style.width = "100px";
        clearInterval(timer);
    }
}, 100);

Demo（如果我理解正确 - 你的jsFiddle没有涉及任何元素，所以很难说出来）

将jQuery递归动画转换为requestAnimationFrame

1 个答案: