阅读数:42 评论数:0

一、概述

在Web应用中，实现动画效果的方法有很多，js中可以通过定时器setTimeout来实现，css3可以使用transition和animation来实现，html5中可以使用canvas，除此之外，html5还提供一个专门用于请求动画的API, requestAnimationFrame（RAF）。

二、基本原理

该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行，从而允许我们按照浏览器的刷新率来调度动画帧，从而实现更加流畅和高效的动画效果。

大多数电脑显示器的刷新频率是 60Hz，大概相当于每秒钟重绘 60 次。大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会有提升。因此最平滑动画的最佳循环间隔是1000ms/60，约等于 16.6ms。

在之前，为了实现动画，常常使用setTimeout()或setInterval()方法来定时更新动画帧。然而，这种方法并不理想，因为它们受限于定时器的精度和浏览器在不同设备上的性能差异。它们的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器 UI 线程队列中以等待执行的时间。如果队列前面已经加入了其他任务，那动画代码就要等前面的任务完成后再执行

requestAnimationFrame的出现解决了这个问题。它使用浏览器的刷新率作为参考，确保动画帧的更新在每一帧之间的间隔是最佳的，从而实现更加流畅和自然的动画效果。

三、使用

function animate() {
  // 执行动画逻辑

  timer=requestAnimationFrame(animate);
}

// 启动动画
let timer=requestAnimationFrame(animate);

//取消动画
 cancelAnimationFrame(timer);