javascript中平滑div宽度的变化

Question

我有一个简单的功能，它增加了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： http ： //jsfiddle.net/RmXr9/7/

有关如何提高div宽度增加平滑度的建议吗？

Answer 1

尝试使用css过渡。 您可以获得更流畅的动画，但需要您以不同的方式构建代码。 css过渡属性的一个示例是：

transition:300ms linear;

那么无论你改变什么属性（例如宽度）都会向它平滑线性300毫秒的过渡。

所以进行平滑的宽度更改就像设置转换一样简单，然后在javascript中执行以下操作：

div.style.width="400px";

这是我嘲笑的一个简单例子：

http://jsfiddle.net/nTMsC/1/

这是一个很好的教程，可以帮助您入门： http ： //www.css3.info/preview/css3-transitions/

Answer 2

对我来说，“颤抖”动画的最大原因之一就是帧速率。 如果您的帧速率太慢，显然动画“颤抖”。 但是如果浏览器处理得太快，浏览器就会变得混乱，你会得到一种不同的“颤抖”。

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

关键是要确保你计时，以便在前一帧结束时或之后开始一帧。 这取决于您处理的代码。 我注意到在开始处理当前帧之前调用了下一帧，因此您可能仍在备份。 也许试试：

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

您的退回功能具有的帧速率200 / 100 ，其为2ms。 您的浏览器极不可能在2ms内完成动画，因此可能会备份。 requestAnimationFrame使用16ms的最大帧速率。

更新 ：

根据你的jsfiddle，你所遇到的问题是，当你经常计算你的百分比时，百分比的变化非常小，并且它们不会转化为div宽度的变化。 这个http://jsfiddle.net/RmXr9/13/应该删除百分比的变化，并显示实际宽度的相应变化。 因此，虽然您经常进行计算（可能每秒60次），但实际的视觉变化只发生在每16帧左右一次。 因此，您的实际帧速率仅为每秒4帧左右，这就是“抖动”动画。 我担心的唯一选择是让动画运行得更快（可能通过减少length变量），或者使div更长（或两者）。

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