一，開篇分析
Hi，大家好！大熊君又和大家見面了，(*^__^*) 嘻嘻……，這系列文章主要是學習Html5相關的知識點，以學習API知識點為入口，由淺入深的引入實例，
讓大家一步一步的體會"h5"能夠做什麼，以及在實際項目中如何去合理的運用達到使用自如，完美駕馭O(∩_∩)O~，好了，廢話不多說，直接進入今天的主題，
今天主要講的是“requestAnimationFrame API”及在客戶端浏覽器中的作用，並且會引入一個實際的例子做為講解的原型范例，讓我們先來看看“requestAnimationFrame API”：
其實在web開發中，我們實現動畫效果的可選方案已經很多了:
1，你可以用CSS3的animattion+keyframes。
2，你也可以用CSS3的transition。
3，你還可以用通過在canvas上作圖來實現動畫，也可以借助jQuery動畫相關的API方便地實現。
4，你還可以使用最原始的“window.setTimout()”或者“window.setInterval()”通過不斷更新元素的狀態位置等來實現動畫，前提是畫面的更新頻率要達到每秒60次才能讓肉眼看到流暢的動畫效果。
5，哈哈哈！現在又多了一種實現動畫的方案，那就是還在草案當中的“window.requestAnimationFrame()”方法。
requestAnimationFrame是什麼？
在浏覽器動畫程序中，我們通常使用一個定時器來循環每隔幾毫秒移動目標物體一次，來讓它動起來。如今有一個好消息，浏覽器開發商們決定：“嗨，為什麼我們不在浏覽器裡提供這樣一個API呢，
這樣一來我們可以為用戶優化他們的動畫。”所以，這個requestAnimationFrame()函數就是針對動畫效果的API，你可以把它用在DOM上的風格變化或畫布動畫好或WebGL中。
使用requestAnimationFrame有什麼好處？
浏覽器可以優化並行的動畫動作，更合理的重新排列動作序列，並把能夠合並的動作放在一個渲染周期內完成，從而呈現出更流暢的動畫效果。
比如，通過requestAnimationFrame()，JS動畫能夠和CSS動畫/變換或SVG SMIL動畫同步發生。另外，如果在一個浏覽器標簽頁裡運行一個動畫，當這個標簽頁不可見時，
浏覽器會暫停它，這會減少CPU，內存的壓力，節省電池電量。
requestAnimationFrame的用法
先來看一個簡單的小栗子:
模擬一個進度條動畫，初始div寬度為1px,在step函數中將進度加1然後再更新到div寬度上，在進度達到100之前，一直重復這一過程。
<div id="test" style="width:1px;height:17px;background:#0f0;">0%</div>
<input type="button" value="Run" id="run"/>
window.requestAnimationFrame = window.requestAnimationFrame window.mozRequestAnimationFrame window.webkitRequestAnimationFrame window.msRequestAnimationFrame;
var start = null;
var ele = document.getElementById("test");
var progress = 0;
function step(timestamp) {
progress += 1;
ele.style.width = progress + "%";
ele.innerHtml=progress + "%";
if (progress < 100) {
requestAnimationFrame(step);
}
}
requestAnimationFrame(step);
document.getElementById("run").addEventListener("click", function() {
ele.style.width = "1px";
progress = 0;
requestAnimationFrame(step);
}, false);