JS动画--requestAnimationFrame

简介

• 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) // 第二个参数，值越大速度滚动的越慢
  }
}