W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
該window.requestAnimationFrame()方法告訴瀏覽器您希望執(zhí)行動畫,并請求瀏覽器調(diào)用指定的函數(shù)以在下次重繪之前更新動畫。該方法將回調(diào)作為在重繪之前調(diào)用的參數(shù)。
注意:如果要在下次重繪時為另一幀設(shè)置動畫,則回調(diào)例程必須自己調(diào)用requestAnimationFrame()。
只要您準備好在屏幕上更新動畫,就應該調(diào)用此方法。這將請求在瀏覽器執(zhí)行下一次重繪之前調(diào)用您的動畫函數(shù)?;卣{(diào)次數(shù)通常為每秒60次,但根據(jù)W3C建議,通常會與大多數(shù)Web瀏覽器中的顯示刷新率相匹配。當在后臺選項卡或隱藏的<iframe>中運行時,大多數(shù)瀏覽器都會暫停調(diào)用requestAnimationFrame(),以提高性能和延長電池壽命。
回調(diào)方法傳遞一個參數(shù),一個DOMHighResTimeStamp,它指示由requestAnimationFrame()start開始排隊的回調(diào)的當前時間。該參數(shù)指示requestAnimationFrame()排隊的回調(diào)開始觸發(fā)時的當前時間。因此,在一個框架中有多個回調(diào),每個回調(diào)都接收相同的時間戳,即使在計算每個先前的回調(diào)的工作負載期間已經(jīng)過了時間。此時間戳是十進制數(shù),以毫秒為單位,但最小精度為1ms(1000μs)。
window.requestAnimationFrame(callback);
返回一個long整數(shù)值,即請求ID,用于唯一標識回調(diào)列表中的條目。這是一個非零值,但您可能不會對其值做任何其他假設(shè)。您可以向window.cancelAnimationFrame()傳遞此值以取消刷新回調(diào)請求。
<html>
<head>
<title>w3cschool(w3cschool.cn)</title>
</head>
<body>
<div id='e' style='border:1px solid;width:100px;height:100px;position:relative;'></div>
<button id='b'>取消執(zhí)行動畫</button>
<button id='c'>執(zhí)行動畫</button>
<script>
//用來兼容不同瀏覽器
window.requestAnimat = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame || function (callback) {
setTimeout(callback, 1000 / 60);
}
})();
let e = document.getElementById('e'), b = document.getElementById('b'), c = document.getElementById('c');
//便宜量
let left = 0;
//正反向
let flag = true;
let ret = 0;
//渲染方法
function render() {
if (flag) {
e.style.left = `${left++}`;
if (left == 100) flag = false;
} else {
e.style.left = `${left--}`;
if (left == 0) flag = true;
}
}
function loopAnim() {
render();
ret = requestAnimat(loopAnim);
};
//在點了多次c之后,動畫速度比較快的情況下點b,則動畫效果一點點減慢直到停止
b.onclick = function () {
window.cancelAnimationFrame(ret);
};
//如果一直點c,動畫會越來越快
c.onclick = function () {
loopAnim();
};
(loopAnim())();
</script>
</body>
</html>
規(guī)范 | 狀態(tài) | 注釋 |
---|---|---|
HTML Living Standard 該規(guī)范中“requestAnimationFrame”的定義。 |
Living Standard
|
沒有變化,取代前一個。 |
基于腳本的動畫的時序控制 該規(guī)范中“requestAnimationFrame”的定義。 |
Obsolete
|
初步定義 |
電腦端 | 移動端 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome
|
Edge
|
Firefox
|
Internet Explorer
|
Opera
|
Safari
|
Android webview | Chrome for Android
|
Edge Mobile | Firefox for Android
|
Opera for Android
|
iOS Safari | |
基本支持 | 支持:24 | 支持 | 支持:23 | 支持:10 | 支持:15 | 支持:6.1 | 支持 | 支持:25 | 支持 | 支持:23 | 支持:15 | 支持:7.1 |
返回值 | 支持:23 | 支持 | 支持:11 | 支持:10 | 支持:15 | 支持:6.1 | 支持 | 支持:25 | 支持 | 支持:14 | 支持:15 | 支持:6.1 |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: