使用javascript setInterval函数实现动画效果：比我预想的要慢

我想用javascript setInterval函数来实现一个框旋转动画效果，我想动画保持1.5秒，在1.5s框中会旋转360度，所以我计算一毫秒的增量，并用每millisecond.Here setInterval函数是我的代码：使用javascript setInterval函数实现动画效果：比我预想的要慢

var duration= 1500;//The animation duration time 
var rotate = 360;//The rotate need to be rotate 
var degPerSec = rotate/parseFloat(duration); //the increment per millisecond 
var degree = 0;//the begin degree 
console.time('rotate'); 
var timer = setInterval(function() { 
    degree = degree + degPerSec; 
    $('#test')[0].style.MozTransform = 'rotate(' + degree + 'deg)'; 
    $('#test')[0].style.WebkitTransform = 'rotate(' + degree + 'deg)'; 

    if (degree >= rotate) { //if reach 360 degree , clear the interval 
     clearInterval(timer); 
     console.timeEnd('rotate');// caculate the duration 
    } 
    }, 1) 
})

动画能够成功执行，但现在看来，这最后不仅1.5秒，当我使用console.time来计算整个持续时间，它持续大约6秒！不是1.5秒。为什么发生这种情况？我该如何解决这个问题？

这里是demo

更新：：为什么我不使用CSS3：的Cuz旋转度为参数，这需要通过形式外，尚未

来源

2012-06-20 hh54188

JavaScript中不保证定时器间隔，'1ms'几乎不可能。请参阅[本文]（http：// ejohn。org/blog/how-javascript-timers-work /）的一个很好的解释。 – bfavaretto

为什么在你使用简单的样式表时你使用Jquery呢？您已经在使用Mozilla- &特定于Webkit的分支代码。不妨也可以用CSS3来完成它并完成它。更快（使用本地C代码而不是JS）并且更简单。

#test{ 
    width:30px; 
    height:30px; 
    background:red; 
    position:absolute; 
    left:20px; 
    top:20px; 
    -webkit-transition: all 1.5s ease; 
    -moz-transition: all 1.5s ease; 
    -o-transition: all 1.5s ease; 
    transition: all 1.5s ease; 
}

编辑：如果你需要使用一个变量参数为度的旋转，这仍然是非常做，能使用JS：

var degrees = 360; 
var incrementer = 1; 
setInterval(function() { 
    var deg = "rotate(" + (degrees * incrementer) + "deg)"; 
    var obj = document.getElementById("test"); 
    if (typeof(obj.style.transform) !== "undefined") { 
    obj.style.transform = deg; 
    } else if (typeof(obj.style.MozTransform) !== "undefined") { 
    obj.style.MozTransform= deg; 
    } else if (typeof(obj.style.WebkitTransform) !== "undefined") { 
    obj.style.WebkitTransform = deg; 
    } 
    incrementer = incrementer + 1; 
}, 1500);

来源

2012-06-20 15:15:51

cuz转动度作为参数应该从外部传递 – hh54188

编辑后的第二段代码似乎不起作用 – hh54188

真的吗？所以[这个链接]（http://jsfiddle.net/XDUrQ/34/）不起作用？因为它在我的系统上正常工作。 –

它的定义，因为你改变dom，然后发生重新流动，并且重新流动更新整个视图（需要一段时间）。避免这种更新频率较低或使用css3动画/转换。

来源

2012-06-20 15:09:15 Luka

对于某些操作系统（例如Windows），1毫秒的间隔没有意义，因为调度程序时间片大约在10毫秒左右。此外，您的功能总共可能需要超过1 ms。这两个同意你的放缓。

为了安全起见，您可以测量函数调用之间的实际延迟。

来源

2012-06-20 15:09:23

你有这样做的原因吗？为什么不使用transition来定义转换的持续时间？

... 
-webkit-transform: rotate(360deg); 
-webkit-transition:-webkit-transform 1s ease-in-out; 
...

来源

2012-06-20 15:11:02 hvgotcodes

cuz转动度作为参数应该从外部传递 – hh54188

所有关于CSS使用上述评论是千真万确。同样值得注意的是，每毫秒运行这么多代码是过度的 - 你只需要~30帧/秒就可以使动画顺利地出现在人眼中，而在这里你以每秒1000帧的速度运行。如果将帧分隔得更多并且每〜33ms运行一次动画，动画将会更快并且看起来更平滑。

最后，有一种工具可以确定最佳帧频并为我们内置的浏览器执行一个运行循环，称为requestAnimationFrame。你可以传递这个回调函数，它将确定最有效的帧速率（如果可能，通常为60），并以最有效的方式运行动画，从而最大限度地减少与重绘相关的开销。

对于这个例子，它会很容易替换setInterval并对您的旋转值做一些微调。

来源

2012-06-20 15:23:00

使用javascript setInterval函数实现动画效果：比我预想的要慢

回答

相关问题