requestAnimationFrame原理和使用

news2024/12/22 14:25:25

`requestAnimationFrame` 是一个用于在浏览器中实现高效动画的方法。它告诉浏览器你希望执行一个动画，并在下一次重绘之前调用指定的回调函数来更新动画。浏览器会自动优化动画的刷新频率，以确保动画的流畅性和性能。

原理

帧刷新：浏览器通常以每秒 60 帧的频率刷新屏幕（即每 16.67 毫秒刷新一次）。
回调函数：requestAnimationFrame 接受一个回调函数作为参数，这个回调函数会在下一次屏幕重绘之前执行。
优化：浏览器会自动优化动画的刷新频率，确保动画在屏幕刷新时执行，从而避免不必要的重绘和性能问题。

使用方法

基本用法

requestAnimationFrame 回调函数的参数 timestamp 是一个高精度时间戳，用于计算动画的进度。

function animate(timestamp) {
  // 更新动画状态
  console.log('Animating...');

  // 请求下一帧
  requestAnimationFrame(animate);
}

// 开始动画
requestAnimationFrame(animate);

示例：移动一个元素

以下是一个使用 requestAnimationFrame 实现简单动画的示例，移动一个元素从左到右：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>requestAnimationFrame Example</title>
  <style>
    #box {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
      top: 50px;
      left: 0;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script>
    const box = document.getElementById('box');
    let start = null;

    function step(timestamp) {
      if (!start) start = timestamp;
      const progress = timestamp - start;
      box.style.left = Math.min(progress / 10, 200) + 'px';
      if (progress < 2000) { // 动画持续 2 秒
        requestAnimationFrame(step);
      }
    }

    requestAnimationFrame(step);
  </script>
</body>
</html>

取消动画

可以使用 cancelAnimationFrame 取消一个已经请求的动画帧。requestAnimationFrame 返回一个请求 ID，可以用这个 ID 取消动画。

let animationId;

function animate() {
  // 更新动画状态
  console.log('Animating...');

  // 请求下一帧
  animationId = requestAnimationFrame(animate);
}

// 开始动画
animationId = requestAnimationFrame(animate);

// 取消动画
cancelAnimationFrame(animationId);