3

我有一个简单的函数，它增加了一个 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 宽度递增平滑度的方法有什么建议吗？

4

2 回答 2

10

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

transition:300ms linear;

那么你改变的任何属性（例如宽度）都会向它进行平滑的线性 300 毫秒过渡。

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

div.style.width="400px";

这是我模拟的一个简单示例：

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

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

于 2013-01-17T06:52:47.690 回答
2

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

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

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

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

您的后备函数的帧速率为200 / 1002 毫秒。您的浏览器极不可能在 2 毫秒内完成动画，因此它很可能会被备份。requestAnimationFrame使用 16 毫秒的最大帧速率。

更新：

根据您的 jsfiddle，您遇到的问题是，虽然您经常计算百分比，但百分比的变化非常小，并且它们不会转化为 div 宽度的变化。这个http://jsfiddle.net/RmXr9/13/应该演示百分比的变化，并显示实际宽度的相应变化。因此，尽管您经常进行计算（可能每秒 6​​0 次），但实际的视觉变化仅每 16 帧左右发生一次。因此，您的实际帧速率仅为每秒约 4 帧，这会产生“抖动”动画。恐怕你唯一的选择是让动画运行得更快（也许通过减少你的length变量），或者让 div 更长（或两者兼而有之）。

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

于 2013-01-17T06:42:47.167 回答