使用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函數實現動畫效果：比我預想的要慢

回答

相關問題