requestAnimationFrame()指南

學習使用API以可預測的方式執行動畫並安排事件 requestAnimationFrame()是一個相對較新的瀏覽器API。它提供一種更可預測的方式來連接到瀏覽器的渲染循環。 目前,所有現代瀏覽器(包括IE 10+)都支援這個API。 它不是專門用於動畫的API,但這是它被最廣泛使用的領域。 JavaScript有一個事件循環(event loop)。它不斷運行以執行JavaScript。 在過去,使用setTimeout()或setInterval()執行動畫。你執行一點點動畫,然後使用setTimeout()在幾毫秒後重複執行這段代碼: const performAnimation = () => { //... setTimeout(performAnimation, 1000 / 60) } setTimeout(performAnimation, 1000 / 60) 或是 const performAnimation = () => { //... } setInterval(performAnimation, 1000 / 60) 你可以透過獲取timeout或interval的參考並將其清除來停止動畫: let timer const performAnimation = () => { //... timer = setTimeout(performAnimation, 1000 / 60) } timer = setTimeout(performAnimation, 1000 / 60) //... clearTimeout(timer) performAnimation()調用之間的1000 / 60間隔取決於顯示器的刷新頻率,大多數情況下是60 Hz(每秒重繪60次),因為由於其限制,如果顯示器無法顯示,執行重繪將是無用的。這導致我們有大約16.6毫秒的時間來顯示每一個幀。 這種方法的問題是,即使我們精確指定了這個間隔,瀏覽器可能忙於執行其他操作,我們的setTimeout調用可能不能及時進行重繪,並且將被延遲到下一個循環。 這很糟糕,因為我們丟失了一個幀,在下一個幀中,動畫將被執行兩次,使眼睛注意到不平滑的動畫。 在Glitch上的這個使用setTimeout()構建的動畫的示例中可以看到這個問題。 requestAnimationFrame是執行動畫的標準方式,儘管代碼看起來非常類似於setTimeout/setInterval的代碼,它的工作方式非常不同:...