溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“JavaScript動(dòng)畫抖動(dòng)的原因是什么與怎么解決”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“JavaScript動(dòng)畫抖動(dòng)的原因是什么與怎么解決”吧！
主要原因是瀏覽器無(wú)法確定定時(shí)器的回調(diào)函數(shù)的執(zhí)行時(shí)機(jī)。以 setInterval 為例，當(dāng)一個(gè) setInterval 定時(shí)器被創(chuàng)建后，它的回調(diào)任務(wù)會(huì)被放到異步隊(duì)列，只有當(dāng)同步任務(wù)執(zhí)行完成后，瀏覽器才會(huì)檢查異步隊(duì)列中是否有需要執(zhí)行的異步任務(wù)，如果有，就取出執(zhí)行，這樣會(huì)使任務(wù)的實(shí)際執(zhí)行時(shí)機(jī)比所設(shè)定的延遲時(shí)間要晚一些。
這個(gè)問(wèn)題跟瀏覽器的事件循環(huán)機(jī)制有關(guān)，JavaScript 引擎在解析執(zhí)行我們的代碼的時(shí)候，遇到定時(shí)器，會(huì)調(diào)用瀏覽器 API，讓定時(shí)器去進(jìn)行倒計(jì)時(shí)，此時(shí)并不阻塞同步代碼的執(zhí)行，當(dāng)定時(shí)器倒計(jì)時(shí)完畢，定時(shí)器回調(diào)會(huì)被放入宏任務(wù)隊(duì)列等待執(zhí)行。
在這個(gè)過(guò)程中問(wèn)題就來(lái)了，如果說(shuō)同步代碼的執(zhí)行需要50ms，而定時(shí)器設(shè)置的定時(shí)只有20ms，那么由于事件循環(huán)的機(jī)制，還是要等待同步任務(wù)執(zhí)行完整之后再來(lái)執(zhí)行微任務(wù)隊(duì)列中的定時(shí)器回調(diào)，而這中間，又相隔了30ms，在這30ms的過(guò)程中，定時(shí)器的回調(diào)一直處于 pendding 的狀態(tài)。如果定時(shí)器中是動(dòng)畫相關(guān)的操作，那也需要在預(yù)期的時(shí)間上多等待50ms。
畫了張圖，希望能幫助大家理解（如果不能幫助大家理解，那么請(qǐng)忽略這張圖……）
屏幕分辨率和尺寸也會(huì)影響刷新頻率，不同設(shè)備的屏幕繪制頻率可能會(huì)有所不同，而 setInterval 只能設(shè)置一個(gè)固定的時(shí)間間隔，這個(gè)間隔時(shí)間不一定與屏幕的刷新時(shí)間同步，所以就可能會(huì)導(dǎo)致動(dòng)畫出現(xiàn)隨機(jī)丟幀的問(wèn)題。
這里有兩個(gè)點(diǎn)，一個(gè)是顯示器的刷新頻率，另一個(gè)是定時(shí)器的時(shí)間間隔。
一般顯示器刷新頻率都是60Hz，這基本上意味著每秒需要重繪60次。大多數(shù)瀏覽器都會(huì)限制重繪的頻率，使其不超過(guò)顯示器的刷新頻率。因?yàn)槌^(guò)刷新頻率，用戶也感知不到，白白浪費(fèi)性能。
因此，實(shí)現(xiàn)平滑動(dòng)畫最佳的重繪間隔為1000ms/60，大約17毫秒。以這個(gè)速度重繪，可以實(shí)現(xiàn)最平滑的動(dòng)畫效果。因?yàn)檫@已經(jīng)是瀏覽器的重繪頻率的極限了。
知道何時(shí)繪制下一幀，是創(chuàng)造平滑動(dòng)畫的關(guān)鍵。直到幾年前，都沒(méi)有確切保證讓瀏覽器在何時(shí)把下一幀繪制出來(lái)的方法。隨著 <canvas> 和 HTML5 游戲的興起，開發(fā)者發(fā)現(xiàn) setInterval 和 setTimeout 的不精確是個(gè)大問(wèn)題，而瀏覽器自身的計(jì)時(shí)器也存在著精度不足毫秒的問(wèn)題。
以下是幾個(gè)瀏覽器計(jì)時(shí)器的精度情況：
IE8 以及之前的版本計(jì)時(shí)器精度為 15.625ms；
IE9 及之后的版計(jì)時(shí)器精度為 4ms；
FireFox 和 Safari 的計(jì)時(shí)器精度約為 10ms；
Chrome 的計(jì)時(shí)器精度為 4ms。
以 Chrome 為例，它的計(jì)時(shí)器精度為 4ms，這意味著 0~4 之間的任何值最終要么是 0，要么是4；不可能是別的值。因此，即使將瀏覽器的時(shí)間間隔設(shè)置為最優(yōu)，也免不了只能得到相近似的結(jié)果。
對(duì)于 JavaScript 來(lái)說(shuō)，它不知道瀏覽器會(huì)在何時(shí)發(fā)生重繪。因此，我們通過(guò)定時(shí)器做動(dòng)畫的時(shí)候，在定時(shí)器中控制動(dòng)畫的代碼已經(jīng)執(zhí)行完成的情況下，動(dòng)畫效果并不一定會(huì)立馬生效，因?yàn)榇藭r(shí)瀏覽器可能還處在等待下一次重繪的過(guò)程中，當(dāng)下一次重繪完成，動(dòng)畫效果才能在瀏覽器窗口中顯示出來(lái)。
而由于瀏覽器計(jì)時(shí)器時(shí)間差的問(wèn)題，會(huì)導(dǎo)致定時(shí)器的計(jì)時(shí)并不一定是我們?cè)O(shè)置的 17 ms，而是在多個(gè)時(shí)間點(diǎn)內(nèi)反復(fù)橫跳，也因此才出現(xiàn)使用定時(shí)器做動(dòng)畫的時(shí)候動(dòng)畫抖動(dòng)的問(wèn)題，在復(fù)雜的動(dòng)畫中，這種問(wèn)題尤為明顯。
在這樣的環(huán)境下，今天的主角 requestAnimationFrame 應(yīng)運(yùn)而生！
Mozilla 的 Robert O'Callahan 一直在思考這個(gè)問(wèn)題，并且提出了一個(gè)獨(dú)特的解決方案。他指出，瀏覽器知道 CSS 過(guò)渡和動(dòng)畫應(yīng)該什么時(shí)候開始，并且能夠計(jì)算出正確的時(shí)間間隔，到時(shí)間就去刷新用戶界面。
但是對(duì)于 JavaScript 而言，瀏覽器并不知道動(dòng)畫什么時(shí)候開始。他給出的方案是創(chuàng)造一個(gè)名為 MozRequestAnimationFrame 的新方法，以此來(lái)通知瀏覽器某些 JavaScript 代碼要執(zhí)行動(dòng)畫了。這樣瀏覽器就可以在運(yùn)行某些代碼后進(jìn)行適當(dāng)?shù)膬?yōu)化。
目前，所有的瀏覽器都支持這個(gè)方法不帶前綴的版本，也就是現(xiàn)在用到的 requestAnimationFrame。
這里就不再過(guò)多的介紹 requestAnimationFrame 的詳細(xì)用法了，它的用法并不復(fù)雜。
與定時(shí)器不同的是，requestAnimationFrame 只會(huì)在被調(diào)用的時(shí)候執(zhí)行一次動(dòng)畫，而不會(huì)連續(xù)執(zhí)行。如果想做連續(xù)的動(dòng)畫，則可以通過(guò)遞歸來(lái)實(shí)現(xiàn)對(duì) requestAnimationFrame 的連續(xù)調(diào)用。
接下來(lái)通過(guò)一個(gè) demo 來(lái)對(duì)比一下使用 requestAnimationFrame 和 setInterval 兩者做出來(lái)的動(dòng)畫效果之間的差異。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.square1,
.square2 {
position: absolute;
width: 100px;
height: 100px;
}
.square1 {
top: 40px;
background: red;
}
.square2 {
top: 150px;
background: blue;
}
</style>
<body>
<div class="container">
<div class="square1"></div>
<div class="square2"></div>
<button class="btn">開始！</button>
</div>
<script>
const square1El = document.querySelector('.square1')
const square2El = document.querySelector('.square2')
// 定時(shí)器版
function squareMove() {
let timer = null
square1El.style.left = '0px'
timer = setInterval(() => {
const squareLeft = parseInt(square1El.style.left)
if (squareLeft >= 500) return clearInterval(timer)
square1El.style.left = squareLeft + 1 + 'px'
}, 17)
}
// requestAnimationFrame 版
function squareMove2() {
let timer = null
square2El.style.left = '0px'
function updateAnimation() {
const squareLeft = parseInt(square2El.style.left)
if (squareLeft >= 500) return cancelAnimationFrame(timer)
square2El.style.left = squareLeft + 1 + 'px'
window.requestAnimationFrame(updateAnimation)
}
window.requestAnimationFrame(updateAnimation)
}
document.querySelector('.btn').addEventListener('click', () => {
squareMove()
squareMove2()
})
</script>
</body>
</html>在頁(yè)面中畫了兩個(gè)正方形，當(dāng)點(diǎn)擊按鈕的時(shí)候方塊開始運(yùn)動(dòng)，紅色方塊是使用 setInterval 實(shí)現(xiàn)的動(dòng)畫，藍(lán)色方塊使用的是 requestAnimationFrame。
在生成gif的時(shí)候視頻被壓縮了，但是還是能看到紅色的方塊在開始運(yùn)動(dòng)的時(shí)候有明顯的抖動(dòng)，而藍(lán)色的方塊則比較絲滑。
實(shí)際上，requestAnimationFrame 的回調(diào)函數(shù)可以接收一個(gè)參數(shù)，這個(gè)參數(shù)是一個(gè) DOMHightResTimeStamp 的實(shí)例（比如：performance.now()的返回值），用來(lái)表示下一次重繪的時(shí)間。這一點(diǎn)非常重要，requestAnimationFrame 實(shí)際上是把重繪任務(wù)安排在了未來(lái)的一個(gè)已知的時(shí)間點(diǎn)上，而且通過(guò)這個(gè)參數(shù)來(lái)告訴開發(fā)者。
類似于 setInterval 的清除方法 clearInterval，requestAnimationFrame 也有對(duì)應(yīng)的取消重繪的方法 cancelAnimationFrame，用法也跟 clearInterval 非常類似，在每次調(diào)用 requestAnimationFrame 的時(shí)候，都會(huì)返回一個(gè)id，cancelAnimationFrame 就是通過(guò)這個(gè)id去取消對(duì)應(yīng)的 requestAnimationFrame。
感謝各位的閱讀，以上就是“JavaScript動(dòng)畫抖動(dòng)的原因是什么與怎么解決”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)JavaScript動(dòng)畫抖動(dòng)的原因是什么與怎么解決這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼