js中requestAnimationFrame()解读与使用示例_Javascript

requestanimationframe() 是 javascript 中用于实现动画效果的一个重要方法。它告诉浏览器你想执行动画，并要求浏览器在下次重绘之前调用指定的回调函数来更新动画。相比传统的 settimeout 和 setinterval，requestanimationframe() 更加高效且能够提供更流畅的动画。

基本概念

1. 浏览器的重绘和回流

浏览器通过一个叫做“帧”的机制来渲染页面内容。一般来说，浏览器每秒会尝试绘制 60 帧（60fps），每一帧都需要浏览器计算布局、样式，并把内容绘制到屏幕上。requestanimationframe() 是专门为此设计的，它会让你的动画代码在浏览器的重绘过程中执行，确保每次动画更新都与浏览器的刷新频率同步。

2. 效率和节能

requestanimationframe() 会根据显示器的刷新率来自动调节帧率，常见的刷新率是 60fps。如果你的显示器是 60hz，requestanimationframe() 每秒会回调约 60 次。如果浏览器窗口被最小化，或者切换到另一个标签页，requestanimationframe() 会暂停执行，减少cpu和gpu的负载。这和 settimeout、setinterval 不同，它们会一直执行，即使页面不可见。

使用方法

let start = null;

function step(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;

  // 更新动画的位置，这里是简单的例子，假设移动一个物体
  const element = document.getelementbyid('box');
  element.style.transform = `translatex(${math.min(progress / 10, 200)}px)`;

  if (progress < 2000) { // 继续动画，直到经过2秒
    requestanimationframe(step);
  }
}

requestanimationframe(step);

示例详解

1. 回调函数

requestanimationframe() 需要一个回调函数作为参数，这个回调函数会在浏览器准备好绘制下一帧时被调用。在上面的示例中，step 函数就是这个回调函数。

2. timestamp 参数

浏览器会为回调函数传递一个 timestamp 参数，表示当前被请求的动画帧开始时的时间戳。这个 timestamp 是以毫秒为单位的高精度时间，可以用来计算动画进行的时间差。

3. 递归调用

在 step 函数内部，我们通过 requestanimationframe() 自己调用自己，形成一个动画的递归循环。每一次调用 requestanimationframe(step)，浏览器都会在下一帧时再次执行 step 函数。

4. 条件控制

为了停止动画，我们可以在递归调用时通过条件判断，比如在上面的例子中，我们通过 progress < 2000 来控制动画持续 2 秒。如果不加这个条件，动画会一直进行下去。

与 settimeout 和 setinterval 的比较

function moveboxwithsettimeout() {
  let position = 0;
  const element = document.getelementbyid('box');

  function update() {
    position += 5;
    element.style.transform = `translatex(${position}px)`;
    
    if (position < 200) {
      settimeout(update, 1000 / 60); // 每秒60次更新
    }
  }

  update();
}

function moveboxwithrequestanimationframe() {
  let position = 0;
  const element = document.getelementbyid('box');

  function update() {
    position += 5;
    element.style.transform = `translatex(${position}px)`;

    if (position < 200) {
      requestanimationframe(update);
    }
  }

  requestanimationframe(update);
}

区别：

时间控制：
- settimeout(update, 1000 / 60) 人为指定每秒60帧，但实际性能可能受限于浏览器、cpu 等，不一定精准。
- requestanimationframe() 由浏览器根据系统的负载来决定最佳帧率，并与显示器的刷新同步。
后台标签页处理：
- settimeout 和 setinterval 在后台标签页或最小化时仍然运行，浪费资源。
- requestanimationframe() 会在页面不可见时暂停，节省资源。
流畅度：
- settimeout 和 setinterval 由于无法和浏览器的重绘同步，容易导致卡顿、抖动。
- requestanimationframe() 能提供更加平滑的动画效果。

多个动画场景

你可以通过 requestanimationframe() 同时控制多个动画。只需要确保每个动画逻辑在回调函数中被正确处理。

let box1 = document.getelementbyid('box1');
let box2 = document.getelementbyid('box2');
let start = null;

function animate(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;

  box1.style.transform = `translatex(${math.min(progress / 10, 200)}px)`;
  box2.style.transform = `translatey(${math.min(progress / 20, 300)}px)`;

  if (progress < 2000) {
    requestanimationframe(animate);
  }
}

requestanimationframe(animate);

上面的代码演示了：

box1 向右移动，每 10 毫秒移动一个像素，直到移动 200 像素。
box2 向下移动，每 20 毫秒移动一个像素，直到移动 300 像素。

多个元素的动画可以在同一个 requestanimationframe 回调中进行，这样它们会同步进行，保证帧率的一致性。

动画的取消

requestanimationframe() 返回一个唯一的整数 id，代表该动画帧请求。可以使用 cancelanimationframe() 取消这个动画。

let animationid;

function step(timestamp) {
  // 动画逻辑
  if (progress &lt; 2000) {
    animationid = requestanimationframe(step);
  }
}

// 开始动画
animationid = requestanimationframe(step);

// 取消动画
cancelanimationframe(animationid);