實(shí)現(xiàn)動(dòng)畫效果的方法比較多，Javascript 中可以通過定時(shí)器 setTimeout 來實(shí)現(xiàn)奸柬，css3 可以使用 transition 和 animation 來實(shí)現(xiàn)生年，html5 中的 canvas 也可以實(shí)現(xiàn)。除此之外廓奕，html5 還提供一個(gè)專門用于請求動(dòng)畫的API抱婉，那就是 requestAnimationFrame，顧名思義就是請求動(dòng)畫幀桌粉。
屏幕刷新頻率：屏幕每秒出現(xiàn)圖像的次數(shù)蒸绩。普通筆記本為60Hz
動(dòng)畫原理：計(jì)算機(jī)每16.7ms刷新一次，由于人眼的視覺停留番甩，所以看起來是流暢的移動(dòng)侵贵。
setTimeout：通過設(shè)定間隔時(shí)間來不斷改變圖像位置，達(dá)到動(dòng)畫效果缘薛。但是容易出現(xiàn)卡頓窍育、抖動(dòng)的現(xiàn)象；原因是：1宴胧、settimeout任務(wù)被放入異步隊(duì)列漱抓，只有當(dāng)主線程任務(wù)執(zhí)行完后才會執(zhí)行隊(duì)列中的任務(wù)，因此實(shí)際執(zhí)行時(shí)間總是比設(shè)定時(shí)間要晚恕齐；2乞娄、settimeout的固定時(shí)間間隔不一定與屏幕刷新時(shí)間相同，會引起丟幀显歧。
-
requestAnimationFrame：優(yōu)勢：由系統(tǒng)決定回調(diào)函數(shù)的執(zhí)行時(shí)機(jī)仪或。60Hz的刷新頻率，那么每次刷新的間隔中會執(zhí)行一次回調(diào)函數(shù)士骤，不會引起丟幀范删，不會卡頓
使用：
var progress = 0;
//回調(diào)函數(shù)
function render() {
progress += 1; //修改圖像的位置
if (progress < 100) {
//在動(dòng)畫沒有結(jié)束前，遞歸渲染
window.requestAnimationFrame(render);
}
}
//第一幀渲染
window.requestAnimationFrame(render);</pre>
優(yōu)勢：
CPU節(jié)能：使用setTimeout實(shí)現(xiàn)的動(dòng)畫拷肌，當(dāng)頁面被隱藏或最小化時(shí)到旦，setTimeout 仍然在后臺執(zhí)行動(dòng)畫任務(wù)，由于此時(shí)頁面處于不可見或不可用狀態(tài)巨缘，刷新動(dòng)畫是沒有意義的添忘，完全是浪費(fèi)CPU資源。而requestAnimationFrame則完全不同若锁，當(dāng)頁面處理未激活的狀態(tài)下搁骑，該頁面的屏幕刷新任務(wù)也會被系統(tǒng)暫停，因此跟著系統(tǒng)步伐走的requestAnimationFrame也會停止渲染，當(dāng)頁面被激活時(shí)靶病，動(dòng)畫就從上次停留的地方繼續(xù)執(zhí)行会通，有效節(jié)省了CPU開銷口予。
函數(shù)節(jié)流：在高頻率事件(resize,scroll等)中娄周，為了防止在一個(gè)刷新間隔內(nèi)發(fā)生多次函數(shù)執(zhí)行，使用requestAnimationFrame可保證每個(gè)刷新間隔內(nèi)沪停，函數(shù)只被執(zhí)行一次煤辨，這樣既能保證流暢性，也能更好的節(jié)省函數(shù)執(zhí)行的開銷木张。
- 優(yōu)雅降級：由于兼容性問題众辨，需要降級對接口進(jìn)行封裝，優(yōu)先使用高級特性舷礼，再根據(jù)瀏覽器不同情況進(jìn)行回退鹃彻，直到只能使用settimeout。參考[GitHub](https://github.com/darius/requestAnimationFrame）
