js动画最佳实现——requestAnimationFrame

Posted 张啊咩

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js动画最佳实现——requestAnimationFrame相关的知识,希望对你有一定的参考价值。

我们经常用setInterval来实现动画,其实这种做法不是太好,因为不同浏览器的刷新频率也不一样(一般认为设置16为最佳,按每秒60帧算,1000/60≈16.67)

var dis = 0,timer = 0;
clearInterval(timer);
timer = setInterval(function(){
   div.style.left = ++dis;
  if(dis>=50) clearInterval(timer)
},16)

实现js动画最好的是requestAnimationFrame:

requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点:
1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。
2、在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的的cpu,gpu和内存使用量。

var dis =0;
function animation(){
  requestAnimationFrame(function(){
      div.style.left = ++dis;
      if(disx<50) animation();
  })  
}
animation();


以上是关于js动画最佳实现——requestAnimationFrame的主要内容,如果未能解决你的问题,请参考以下文章

三.js动画

FlutterComponent最佳实践之动画的显和隐

JS判断浏览器是否支持某一个CSS3属性的最佳实践

如丝般顺滑:使用 CSS3 实现 60 帧的动画

js实现匀速下落动画怎么实现

Js实现动画框架