将 jQuery 递归动画转换为 requestAnimationFrame

Convert jQuery recursive animate to requestAnimationFrame

本文关键字：requestAnimationFrame 转换 动画 jQuery 递归      更新时间：2023-09-26

我需要将动画划分为步骤的时间精度。

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

记录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，或以其他方式实现精确的计时？

你不需要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不涉及任何元素，所以很难说）

相关文章：
  • 没有找到相关文章