标签归档:js

web动画–requestAnimationFrame

在很久很久以前我们页面动画是这个样子的

 

但是这样做有几个问题,就是

  • setTimeout效率并不是那么高
  • 大多数浏览器的是已16ms为一帧,但是如果你设置不对,就会出现跳帧现象

于是乎作为现代人的我们,有了新的解决方法就是利用 requestAnimationFrame

直接上代码:

 

针对不同浏览器做了兼容,可以说从IE6开始支持,那么requestAnimationFrame有什么好处呢,

  • 根据不同浏览器提供的帧去运动
  • setTimeout本身机制并没有requestAnimationFrame效率高(具体原因待考察)
  • 运行会更流畅,由其本身决定
  • 相对css3来说,绘制更高级,css3有很多效果达不到
  • 当当前页面不显示是,动画停止,节省cpu和电池热量

上面demo针对不同浏览器做了兼容,同时也写了取消事件。其实主要就这两个属性,很容易掌握。

ps: 其实开始研究的时候有个疑惑的地方,requestAnimationFrame 他没有时间这个参数,如果想要达到越来越快的效果怎么办。其实很简单,换个角度,以运动距离为参考,不断加大运动间距就ok啦。

参考:

MDN文档 

CSS3动画那么强,requestAnimationFrame还有毛线用?