02 解决动画性能问题(requestAnimationFrame)

1.用requestAnimationFrame代替setInterval定时器

优点:
1.requestAnimationFrame是浏览器用于定时循环操作的一个接口,类似于setTimeout,主要用途是按帧对网页进行重绘
2.充分利用显示器的刷机机制,节省系统系统资源。
3.requestAnimationFrame启动动画,默认返回一个id,cancelAnimationFrame只需要传入这个id就可以停止了。

demo1:进度条

0%

效果:点击出现一个进度条

image.png

demo2:直线运动,用requestAnimationFrame和cancelAnimationFrame替代定时器的设置



  
    Document
    
  
  
    

你可能感兴趣的:(02 解决动画性能问题(requestAnimationFrame))