用requestAnimationFrame優化你的javascript動畫

有了css3，我們不在需要Flash來製作好看的動畫，一般情況下，我們甚至不需要javascript。但是css3 在一些案例中有些不足。如果你需要計算或重新計算你的動畫，那就離不開javascript。儘管不必使用setTimeout 和 setInterval。這樣做的缺點是在定義的時間間隔簡單地重複一個函式。對於動畫，定義的時間間隔不是讓他們工作的最好方式。如果您已經使用了這2個函式，您可能已經遇到了困難，在尋找與所需的動畫步驟的時間間隔的值。此外，setTimeout和setInterval很少顯示同步的重新整理率，從而導致效果動畫不能準確給出。

requestanimationframe瀏覽器裡的 API

介紹html5中名叫requestanimationframe的一種選擇。除了一個例外，它的運作模式和之前的函式非常相似。用下邊的程式碼而不是設定重新整理速率的間隔，在瀏覽上進行。在setTimeout和setInterval的比較尤其明顯。當瀏覽器上有一個以上的動畫執行時，就會感覺不流暢。而requestanimationframe會降低這個每幀的速度，必要時，保持動畫的流暢。

1.var schritt = 0;

2.function animation() {

1. schritt += 10;

2. document.getElementById("element").style.left = schritt + "px";

3. window.requestAnimationFrame(animation);

6.}

7.window.requestAnimationFrame(animation);

在這個例子中，我們讓一個元素從左到右每10px動一次。預設的速度通常是每秒60幀。 由於CPU的不同，可能會有差異。瀏覽器也不是有一個固定的幀速率。requestanimationframe的另一個優點是，只在可見的視窗或選項卡動畫執行。當動畫被發現在一個視窗或標籤，是不活躍的時候，動畫會停止，但自動恢復後的視窗或標籤時，會再次執行。想要手動的停止動畫， 可以使用cancelAnimationFrame這個函式。

加廠商字首瀏覽器才能支援

在寫這篇文章時，當時只有WebKit，Mozilla最新的Internet Explorer支援requestanimationframe函式。cancelanimationframe函式目前限於Mozilla。由於函式是比較新的，每個瀏覽器都需要一個不同的語法。你可以使用一個變數來設定相應的字首： 1.var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

結論：動畫的效能靠requestAnimationFrame本身的功能來實現，他們是非常簡單，速度更快，更可靠。因此，你應該儘可能選擇這種方法，而不是使用傳統的方法，對老的瀏覽器實行相容策略。特別是移動端的使用者將會從這個方法中感受到好處。如果你正在尋找一個好的測試比較，首選微軟的IE開發測試。