javascript - javascript中平滑的div宽度变化

Question

我有一个简单的函数，它增加了一个 div 的宽度，但它没有顺利地完成它有点“juddery”。

我正在使用请求动画帧在 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/