搞定动画卡顿与性能提升的新方案——requestAnimationFrame

2024-01-19 07:43:26

requestAnimationFrame简介

requestAnimationFrame是一个JavaScript函数，允许您以每秒60次的固定频率（取决于浏览器的刷新频率）在浏览器中执行动画。与传统的setTimeout或setInterval方法不同，requestAnimationFrame会等待浏览器完成当前正在执行的任务（如页面渲染）后再执行动画，这样可以避免与浏览器渲染进程冲突导致的动画卡顿现象。同时，requestAnimationFrame还会根据浏览器的刷新频率自动调整动画的执行时机，确保动画的流畅性。

requestAnimationFrame用法

使用requestAnimationFrame非常简单，只需调用该函数并将一个回调函数作为参数传入即可。回调函数会在每次屏幕刷新时被调用，您可以在回调函数中更新动画的当前状态。如下所示：

function animate() {
  // 更新动画状态
  ...

  // 再次调用requestAnimationFrame，实现持续动画
  requestAnimationFrame(animate);
}

// 启动动画
requestAnimationFrame(animate);

requestAnimationFrame原理

requestAnimationFrame通过利用浏览器本身的刷新机制来实现动画的流畅执行。当您调用requestAnimationFrame时，浏览器会将回调函数添加到一个队列中。在浏览器的每个刷新周期中，浏览器都会从队列中取出回调函数并执行它。这样，动画就可以与浏览器的刷新频率保持同步，避免出现动画卡顿的现象。

requestAnimationFrame示例

以下是一个使用requestAnimationFrame实现简单动画的示例：

// 定义一个变量来保存动画的当前位置
let position = 0;

function animate() {
  // 更新动画位置
  position += 1;

  // 使用position来更新动画元素的位置
  element.style.left = position + 'px';

  // 再次调用requestAnimationFrame，实现持续动画
  requestAnimationFrame(animate);
}

// 启动动画
requestAnimationFrame(animate);