requestAnimationFrame動畫的另一種方式
阿新 • • 發佈：2018-11-30
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>requestAnimationFrame</title> </head> <body> <script> function animate () { requestAnimationFrame(animate); document.getElementsByTagName('body')[0].innerHTML+='22'; } animate(); </script> </body> </html>
window.requestAnimationFrame() 將告知瀏覽器你馬上要開始動畫效果了，後者需要在下次動畫前呼叫相應方法來更新畫面。這個方法就是傳遞給window.requestAnimationFrame()的回撥函式。
也可這個方法原理其實也就跟setTimeout/setInterval差不多，通過遞迴呼叫同一方法來不斷更新畫面以達到動起來的效果，但它優於setTimeout/setInterval的地方在於它是由瀏覽器專門為動畫提供的API，在執行時瀏覽器會自動優化方法的呼叫，並且如果頁面不是啟用狀態下的話，動畫會自動暫停，有效節省了CPU開銷。