requestAnimationFrame
一、流暢的web動畫
Web 動畫幀率（FPS）: 每秒鐘畫面更新的次數。
我們平時看到的連續(xù)動畫都是由一幅幅靜止畫面組成的，每幅畫面稱為一幀。理論上，FPS越高，動畫越流暢压鉴。幀率在 30 FPS 以下的動畫宦赠，讓人感覺到明顯的卡頓。
目前大多數設備的屏幕刷新率為 60 次/秒队萤，所以通常來講 FPS 為 60 frame/s 時動畫效果最好轮锥，也就是每幀的消耗時間為 16.67ms。
二要尔、setTimeout 與 css3 實現動畫的局限
setTimeout
假如 setTimeout 設置的時間間隔小于 16.7ms 時舍杜，就會導致丟幀現象，為了避免這種情況（動畫頻率和瀏覽器刷新頻率不一致）盈电，就出現了 requestAnimationFrame 蝴簇。它的做法就是跟著瀏覽器的繪制頻率走，
優(yōu)點：
易用匆帚，低效熬词，兼容好；
缺點：
- setInterval多個間隔可能會被跳過
- setInterval多個間隔可能比預期小
- 不同瀏覽器的精度量級不同：
-
jQuery 無法解決頻繁觸發(fā) Layout 導致的抽動吸重。
image.png
2) css3動畫
css3的動畫互拾，都是三次方的曲線： linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n)
css3動畫能力有限。
css3
優(yōu)點：簡單高效嚎幸；不依賴主線程颜矿；采用硬件加速。
缺點：
CSS3不能動態(tài)修改或定義動畫內容嫉晶；
不同的動畫無法實現同步骑疆；
CSS3 transition 強制硬件加速加大GPU消耗，高負荷情形下導致移動設備上運行不暢替废；
由于transition并不是由JS原生控制箍铭，瀏覽器無法
1. requestAnimationFrame定義
requestAnimationFrame 是瀏覽器用于定時循環(huán)操作的一個接口，按幀對網頁進行重繪椎镣。讓各種網頁動畫效果有一個統(tǒng)一的刷新機制诈火。使用這個API，告訴瀏覽器你希望執(zhí)行動畫状答，讓瀏覽器在下一個動畫幀安排一次網頁重繪冷守。
requestAnimationFrame 充分利用瀏覽器的刷新機制，并與瀏覽器的刷新頻率保持同步惊科。如果瀏覽設備繪制間隔是16.7ms拍摇，那就按16.7ms這個間隔繪制；如果瀏覽設備繪制間隔是10ms馆截，就按10ms 繪制授翻。這樣就不會存在過度繪制的問題，動畫不會丟幀。
瀏覽器刷新頻率通常是每秒60次（大多數瀏覽器通常匹配W3C所建議的刷新率）堪唐，即每秒最多只能重繪60次巡语。
此外，一旦頁面處于閑置狀態(tài)淮菠，requestAnimationFrame 會自動暫停刷新男公。
優(yōu)勢：節(jié)省系統(tǒng)資源，提高系統(tǒng)性能合陵，改善視覺效果枢赔。
相比 CSS 動畫有更好的掌控，能合理降低CPU的使用拥知。
最小化的消耗資源踏拜，RAF在頁面被切換或瀏覽器最小化時，會暫停執(zhí)行低剔，等頁面再次關注時速梗，繼續(xù)執(zhí)行動畫。
2.語法：
重繪： requestID = window.requestAnimationFrame(callback);
取消重繪：window.cancleAnimationFrame(requestID);
-
requestAnimationFrame該方法接收一個回調函數作為參數襟齿，這個回調函數在瀏覽器重繪之前調用姻锁。返回一個代表此次任務ID的整數值。 - 回調函數callback可傳入一個參數猜欺，時間戳位隶。
用法類似于setTimeout，也是執(zhí)行一次回調开皿。
3. 兼容性 & polyfill
簡單兼容：
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60)
}
})().
完整版：
4. 動畫
緩動(Tween)：
Linear：無緩動效果
Quadratic：二次方的緩動（t^2）
Cubic：三次方的緩動（t^3）
Quartic：四次方的緩動（t^4）
Quintic：五次方的緩動（t^5）
Sinusoidal：正弦曲線的緩動（sin(t)）
Exponential：指數曲線的緩動（2^t）
Circular：圓形曲線的緩動（sqrt(1-t^2)）
Elastic：指數衰減的正弦曲線緩動
超過范圍的三次方緩動（(s+1)t^3 – st^2）
指數衰減的反彈緩動
借助 requestAnimationFrame 和上面的動畫算法涧黄，可以完成各種動畫效果。
