requestAnimationFrame 的时间差

requestAnimationFrame 是一个用于执行动画的 Web API 方法，它在每次浏览器重绘之前调用指定的回调函数。在每次回调函数执行时，可以通过传入的参数获得当前帧与上一帧之间的时间差，通常以毫秒为单位。

时间差可以通过回调函数的参数进行获取，常见的参数名称为 `timestamp`。在每次回调函数被调用时，`timestamp` 参数会被自动传入，它表示当前帧的时间戳。通过记录上一次回调函数执行时的时间戳，可以计算得到当前帧与上一帧之间的时间差。

以下是一个示例代码片段，展示了如何使用 requestAnimationFrame 和时间差：

let lastTimestamp = 0;

function animate(timestamp) {
  const deltaTime = timestamp - lastTimestamp; // 计算时间差
  // 执行动画逻辑

  // 更新上一次时间戳
  lastTimestamp = timestamp;

  requestAnimationFrame(animate); // 递归调用 requestAnimationFrame
}

requestAnimationFrame(animate); // 启动动画

在上述示例中，`deltaTime` 表示当前帧与上一帧之间的时间差，可以用于控制动画的速度和行为。请注意，由于执行间隔不是完全精确的，时间差可能存在微小误差。因此，在计算和使用时间差时，应该进行适当的处理和调整。

相关问题

canvas 使用requestAnimationFrame 如何获取时间差

在使用 `requestAnimationFrame` 来循环更新画布时，你可以利用 `requestAnimationFrame` 的回调函数中传入的时间戳参数来计算时间差。这个时间戳参数表示了当前帧开始渲染时的时间。

下面是一个示例代码：

let startTime; // 保存开始时间
let previousTime; // 上一帧的时间

function updateCanvas(timestamp) {
  if (!startTime) {
    startTime = timestamp; // 初始化开始时间
  }

  if (!previousTime) {
    previousTime = timestamp; // 初始化上一帧的时间
  }

  const deltaTime = timestamp - previousTime; // 计算时间差
  previousTime = timestamp; // 更新上一帧的时间

  // 在这里根据时间差来更新画布

  requestAnimationFrame(updateCanvas); // 循环调用
}

// 启动循环
requestAnimationFrame(updateCanvas);

在每一帧的回调函数中，你可以通过计算 `timestamp - previousTime` 来获取时间差 `deltaTime`，然后可以根据这个时间差来进行相应的画布更新操作。注意，在第一帧和初始化时，上一帧的时间 `previousTime` 和开始时间 `startTime` 需要进行初始化。之后，将 `timestamp` 赋值给 `previousTime`，以便在下一帧中计算时间差。

这样，你就可以使用 `requestAnimationFrame` 并获取时间差来实现画布的动态更新。

requestAnimationFrame，计算时间间隔

`requestAnimationFrame`（RAF）是浏览器提供的一个API，用于在下一次浏览器重绘之前安排回调函数执行。它的核心作用是优化动画性能，确保动画帧率接近用户设备的最大刷新率（通常是60fps）。当你使用`requestAnimationFrame`，浏览器会帮你在最合适的时机执行回调，这样可以避免不必要的计算，节省CPU资源。

当你在一个`requestAnimationFrame`回调中执行`Date.now()`或者`performance.now()`，你会发现返回的时间戳并不是两个连续帧之间的真实时间间隔，因为浏览器可能会调整这一时间间隔以保持稳定的帧率。真实的间隔可能会大于或小于预期的16毫秒（对于60fps）。

例如，当设备处于低负载时，浏览器可能会跳过一些帧，让每个帧间隔更长；而当设备负载增加时，为了保证流畅度，可能会将一些帧合并，使得相邻帧之间的间隔变得更短。所以，`requestAnimationFrame`提供的时间差并不直接等于物理时间，而是优化过的帧间间隔。

想要获取更准确的帧速率相关的延迟，你可以采用`performance.now()`而不是`Date.now()`，因为它考虑到浏览器的内部调整：

let lastTime = performance.now();
function animate() {
  const currentTime = performance.now();
  const delta = currentTime - lastTime;
  // ... 执行你的动画代码
  lastTime = currentTime;
  requestAnimationFrame(animate);
}

然后你可以通过计算`delta`值来得到近似的帧率，但注意这仍然不是精确到每一帧的物理时间。