javascript - 将 jQuery 递归动画转换为 requestAnimationFrame

Question

我需要在动画分为步骤期间的时间精度。

进度条的宽度每 100ms 增加 20 个像素。我使用 jQueryanimate()为宽度设置动画。

Logging Date.now()，很明显时间变化了，而且不准确。

http://jsfiddle.net/trustweb/az3aE/23/

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
        );
    }
}

我一直在阅读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);

演示（如果我理解正确的话——你的 jsFiddle 没有涉及任何元素，所以很难说）