requestAnimationFrame()多次调用会越来越快解决方法

window.requestAnimationFrame()这个API是浏览器提供的js全局方法,针对动画效果。 相当与一个定时器.

requestAnimationFrame的方式的优势如下:

1.经过浏览器优化,动画更流畅

2.窗口没激活时,动画将停止,省计算资源

3.更省电,尤其是对移动终端

questAnimationFrame的使用方式,简单调用代码如下。

function animate() {
  // Do whatever
  requestAnimationFrame(animate);
  // Do something animate
  
}
//go->
requestAnimationFrame(animate);

有的时候我们必须要加一些控制,requestAnimationFrame也可以像setInterval一样返回一个句柄,然后我们可以取消它。控制动画代码如下。

let globalID;
function animate() {
  // Do whatever
  globalID=requestAnimationFrame(animate);
  // Do something animate
  
}
//when ot start
    globalID=requestAnimationFrame(animate);
//when to stop
    cancelAnimationFrame(globalID);

多次调用的时候,每次重复调用前都要先取消questAnimationFrame()

使用cancelAnimationFrame()这个函数;

hxy

hxy

秦 夏

留下你的评论

快留下你的小秘密吧