window.requestAnimationFrame()
這個方法是用來在頁面重繪之前，通知瀏覽器調(diào)用一個指定的函數(shù)巫玻，以滿足開發(fā)者操作動畫的需求。這個方法接受一個函數(shù)為參祠汇，該函數(shù)會在重繪前調(diào)用仍秤。
注意: 如果想得到連貫的逐幀動畫，函數(shù)中必須重新調(diào)用 requestAnimationFrame()可很。
如果你想做逐幀動畫的時候诗力，你應(yīng)該用這個方法。這就要求你的動畫函數(shù)執(zhí)行會先于瀏覽器重繪動作我抠。通常來說苇本，被調(diào)用的頻率是每秒60次，但是一般會遵循W3C標(biāo)準(zhǔn)規(guī)定的頻率菜拓。如果是后臺標(biāo)簽頁面瓣窄，重繪頻率則會大大降低。
回調(diào)函數(shù)只會被傳入一個DOMHighResTimeStamp
參數(shù)纳鼎，這個參數(shù)指示當(dāng)前被 requestAnimationFrame 序列化的函數(shù)隊列被觸發(fā)的時間俺夕。因?yàn)楹芏鄠€函數(shù)在這一幀被執(zhí)行，所以每個函數(shù)都將被傳入一個相同的時間戳贱鄙，盡管經(jīng)過了之前很多的計算工作啥么。這個數(shù)值是一個小數(shù)，單位毫秒贰逾，精確度在 10 μs悬荣。
語法
requestID = window.requestAnimationFrame(callback); // Firefox 23 / IE10 / Chrome / Safari 7 (incl. iOS)
requestID = window.mozRequestAnimationFrame(callback); // Firefox < 23
requestID = window.webkitRequestAnimationFrame(callback); // Older versions Chrome/Webkit
參數(shù)
callback
在每次需要重新繪制動畫時,會調(diào)用這個參數(shù)所指定的函數(shù)。這個回調(diào)函數(shù)會收到一個參數(shù)疙剑，這個 DOMHighResTimeStamp
類型的參數(shù)指示當(dāng)前時間距離開始觸發(fā) requestAnimationFrame 的回調(diào)的時間氯迂。
返回值
requestID
是一個長整型非零值,作為一個唯一的標(biāo)識符.你可以將該值作為參數(shù)傳給window.cancelAnimationFrame()
來取消這個回調(diào)函數(shù)践叠。
例子
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var start = null;
var d = document.getElementById('SomeElementYouWantToAnimate');
function step(timestamp) {
if (start === null) start = timestamp;
var progress = timestamp - start;
d.style.left = Math.min(progress/10, 200) + "px";
if (progress < 2000) {
requestAnimationFrame(step);
}
}
requestAnimationFrame(step);
CSS3 animation-play-state 屬性
- Internet Explorer 10、Firefox 以及 Opera 支持 animation-play-state 屬性嚼蚀。
- Safari 和 Chrome 支持替代的 -webkit-animation-play-state 屬性禁灼。
注釋：Internet Explorer 9 以及更早的版本不支持 animation-play-state 屬性。
JavaScript 語法：
object.style.animationPlayState="paused"
