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) // 第二个参数,值越大速度滚动的越慢
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 姓名:岳沁 学号:17101223458 转载自:http://www.cnblogs.com/fsyz/p/80...
    丘之心阅读 499评论 0 0
  • Web前端技术由html、css和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低...
    WEB攻程狮阅读 1,886评论 2 116
  • Web前端技术由html、css和 javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于...
    Hebborn_hb阅读 295评论 0 1
  • 梭罗说:“多余的财富只能够买多余的东西,人的灵魂必需的东西,是不需要花钱购买的。” “极限民”的特征是:舍弃一切可...
    心心筑梦阅读 290评论 0 0
  • 额,之前只画过石膏像(毛奇和阿格里巴),还是一年前 第一次对照片画人像,打结构就一个小时 求指点(๑• . •๑)...
    墨书竹阅读 267评论 7 3