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使用的最大帧速率为16毫秒。

<强>更新：

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

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

javascript中平滑div宽度的变化

2 个答案: