简介
- requestAnimationFrame直译过来就是“请求动画帧”，是html新出的特性API可以用来实现一些动画效果，目前主流浏览器都已经得到支持了
- 相比于css3的动画在某些场景更实用：比如要实现一个平滑滚动到页面顶部的效果，就不能用css3动画了，这个时候就可以让requestAnimationFrame派上用场了
回流(reflow)和重绘(repaint)
- 先来了解一下这两个关于浏览器渲染过程的概念。在你第一次打开一个页面后，就会进行第一次回流和重绘，接着页面就显示出来了。
- 我们知道页面是由dom元素组成的，而当dom树结构发生变动时就会引起回流，比如这些：添加或者删除可见的DOM元素、元素位置改变、浏览器窗口尺寸改变、页面滚动时等等。而如果改变元素颜色、或者改变元素的
visibility样式，这种没有影响render tree结构的操作，就只会引起重绘不会引起回流。
- 回流必将引起重绘，而重绘不一定会引起回流。
回到requestAnimationFrame
- window.requestAnimationFrame()，这个方法只接收一个函数类型的参数，这个参数是一个回调函数，当你准备好更新屏幕画面时你就应该调用requestAnimationFrame方法，然后在页面重绘之前会调用这个回调函数。而如果回调函数内部继续调用window.requestAnimationFrame方法，就可以递归来实现动画效果了API文档
- requestAnimationFrame方法会返回一个id，调用
window.cancelAnimationFrame(id)方法可以取消回调函数
示例代码
- 下面这段代码就是来实现平滑滚动到页面顶部的，可以复制到console里执行来看效果：
const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop
if (c > 0) {
window.requestAnimationFrame && window.requestAnimationFrame(scrollToTop)
window.scrollTo(0, c - c / 8) // 第二个参数，值越大速度滚动的越慢
}
}
