knowledge-kit/Chapter2 - Web FrontEnd/2.22.md

动画控制的另一种技术

在 HTML5 的时代里我们可以通过 css3 的 animation 和 kerframes 配合使用动画；也可以使用 css 的 transform 控制动画；在 JS 里面我们通常用 setTimeout 和 setInterval 来控制动画时间。setTimeout 和 setInterval 对于控制动画时间不是很准确，因为它是靠电脑的刷新频率。并且当浏览器切换到其他页面或者最小化的时候动画还在执行并不会停止，显然是在做一些无用功。接下来要介绍一个新的特性，并且主流浏览器都对他进行了支持。

requestAnimationFrame

来看看 MDN 对它的介绍

window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并在浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。

注意：若您想在下次重绘时产生另一个动画画面，您的回调例程必须调用 requestAnimationFrame()

当你需要更新屏幕画面时就可以调用此方法。在浏览器下次重绘前执行回调函数。回调的次数通常是每秒60次，但大多数浏览器通常匹配 W3C 所建议的刷新频率。在大多数浏览器里，当运行在后台标签页或者隐藏的