javascript中平滑的div宽度更改

我有一个简单的函数，它增加了一个div的宽度，但它做得并不顺利，有点“犹豫不决”

我正在使用请求动画帧在Chrome上执行此操作。。我决定不把数字四舍五入，这样我就可以得到十进制宽度增量。。但我一点也不能让它变得流畅，我想知道我如何改进我的方法

这是我的职责：

function test(data){


var start = parseInt(data.start);
var length = parseInt(data.length); //total length in minutes to complete
var dif = (new Date().getTime() / 1000) - start; //start holds seconds since epoch
var minutes = dif / 60; //convert seconds past into minutes past
var percentage = (minutes/length) * 100;

if(percentage > 100){ percentage = 100; }

    if( percentage != 100 ){
        document.getElementById('r').style.width = percentage+'%';
        document.getElementById('rt').innerHTML = Math.round(percentage)+'%';
    } else if (percentage == 100 ){
        document.getElementById('r').style.width = percentage+'%';
        document.getElementById('rt').innerHTML = 'COMPLETED';
    }
}

我的函数调用如下：

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback,  element){
            window.setTimeout(callback, 200 / 100);
          };
})();

function Update(){
    requestAnimFrame( Update ); 
    test();
}

JSFIddle：

---

关于如何提高div width递增的平滑度，有什么建议吗？

对我来说，“抖动”动画的最大原因之一一直是帧速率。如果帧速率太慢，显然动画会“抖动”。但是如果它太快，浏览器无法处理，浏览器会感到困惑，你会得到另一种“犹豫不决”

我建议帧速率在13到30毫秒之间。JQuery应该使用13ms，但我发现有时候还是太快了。我通常从16ms开始，然后从那里开始实验

关键是要确保对其进行计时，以便在上一帧完成时或之后开始一帧。这将取决于您处理的代码。我注意到您在开始处理当前帧之前调用了下一帧，因此您可能仍在进行备份。或许可以尝试：

function Update(){
    test();
    requestAnimFrame( Update ); 
}

您的回退功能的帧速率为

200/100

，即2ms。浏览器不太可能在2毫秒内完成动画，因此很可能需要备份

requestAnimationFrame

使用16毫秒的最大帧速率

更新：

根据您的JSFIDLE，您遇到的问题是，当您经常计算百分比时，百分比的变化非常小，并且它们不会转化为div宽度的变化。这应该消除百分比变化的中心，并显示实际宽度的相应变化。因此，尽管您经常进行计算（可能每秒60次），但实际的视觉变化仅每16帧左右发生一次。因此，您的实际帧速率仅为每秒4帧左右，这将生成“抖动”动画。恐怕您唯一的选择是使动画运行得更快（可能通过减少

length

变量），或者使div更长（或者两者兼而有之）

---

顺便说一句，我注意到你没有办法在最后停止动画，我也将其添加到了JSFIDLE中。

尝试使用css转换。您可以获得更平滑的动画，但需要以稍微不同的方式构造代码。css转换属性的一个示例如下：

transition:300ms linear;

然后，无论您更改什么属性（例如宽度），都将向其平滑线性过渡300毫秒

因此，进行平滑宽度更改非常简单，只需设置转换，然后在javascript中执行以下操作：

div.style.width="400px";

下面是我模拟的一个快速示例：

下面是一个很好的教程，让您开始学习：

---

我很确定我的浏览器使用的是请求动画帧，而不是设置超时…尝试改变它，但它仍然不能平稳地递增：速率或频率的单位为1/s。当你谈论秒或毫秒时，你不是在谈论速率。那么，为什么它比JS平滑得多呢=/