requestAnimationFrame 似乎在调用 cancelAnimationFrame 后更新变量

Question

我正在尝试使用 MapBoxGL 为相机旋转设置动画，同时提供暂停旋转并使用复选框回调重新启动旋转的选项。 “暂停”/“停止”旋转工作正常，但“重新启动”似乎会在动画从未暂停的情况下拾取它应该在的位置，而不是拾取动画停止的位置。

var animation;

function rotateCamera(timestamp) {
    map.rotateTo((timestamp / 600) % 360, {duration: 0});
    animation = requestAnimationFrame(rotateCamera);
}

当地图加载时，动画被调用：

animation = rotateCamera(0);

回调如下所示：

d3.selectAll("input[name='camerarotation-selection']").on("change", function() {
    if (d3.select("input[name='selection']").property("checked")) {
        rotateCamera(map.getBearing());
    } else {
        cancelAnimationFrame(animation);
    }
});

如果我 console.log rotateCamera 函数内的时间戳变量，我可以看到尽管有 cancelAnimationFrame 调用，它仍会继续递增。我曾尝试在重新启动时声明 animation 未定义，但这似乎也不起作用。我难住了！感谢您的帮助。

Answer 1

传递给requestAnimationFrame回调的时间戳是一个DOMHighResTimestamp，类似于performance.now()返回的时间戳。 此时间戳表示从当前文档的生命周期开始（也可以是 a bit more complicated）开始回调执行开始时经过的毫秒数。

所以即使没有运行 requestAnimationFrame 循环，这个时间戳确实会增加，就像 Date.now() 一样。

let animation = 0;
inp.onchange = e => {
  if (inp.checked) start();
  else {
    cancelAnimationFrame(animation);
  }
};

function start(timestamp) {
  _log.textContent = timestamp;
  animation = requestAnimationFrame(start);
}

<input type="checkbox" id="inp">
<pre id="_log"></pre>

在您的代码中，您可能只想保留自上一帧以来经过的时间。为此，您只需将timestamp 保存在全局可用的变量中，然后在您的回调中执行

var elapsed = timestamp - last_frame;
last_frame = timestamp;

记住还要注意恢复情况，其中timestamp 将未定义，elapsed 应重置。

---

---

现在，我想指出，您对问题的描述也可能完全表明另一个问题：您可以同时运行多个循环。

由于您使用单个 animation 变量来保存 frame_id（由 cancelAnimationFrame 使用），如果您在循环已经运行时调用 rotateCamera，第一个 frame_ids 将丢失，并且它们的 rAF 循环确实会继续。

let common_id = 0; // OP's `animation` variable
let first_id = 0;
let second_id = 0;

function loop1(timestamp) {
  common_id = first_id = requestAnimationFrame(loop1);
  log_1.textContent = "loop 1: " + timestamp;
}

function loop2(timestamp) {
  common_id = second_id = requestAnimationFrame(loop2);
  log_2.textContent = "loop 2: " + timestamp;
}

btn.onclick = e => {
  console.log("first loop's id", first_id);
  console.log("second loop's id", second_id);
  console.log('clearing common_id', common_id);
  cancelAnimationFrame(common_id);
}

loop1();
loop2();

<button id="btn">stop the loop</button>

<pre id="log_1"></pre>
<pre id="log_2"></pre>

我认为这在您的代码中是可能的，因为 input[name='camerarotation-selection'] 可能会更改多次，而 input[name='selection'] 没有更改，甚至因为 input[name='camerarotation-selection'] 可能是多个元素。

为避免这种情况，您可以保留一个信号量变量，让您知道循环是否正在运行，并且仅在未运行时才启动它。 或者你甚至可以完全摆脱cancelAnimationFrame，只使用一个信号量，并在 rAF 回调中提前退出：

let stopped = true;

function loop(timestamp) {
  if (stopped) return; // exit early
  requestAnimationFrame(loop);
  log.textContent = timestamp;
}
// you can click it several times
btn_start.onclick = e => {
  if (stopped === true) { // only if not running yet
    stopped = false;
    requestAnimationFrame(loop);
  }
}
btn_stop.onclick = e => {
  stopped = true; // deal only with the semaphore
};

btn_switch.onclick = e => {
  stopped = !stopped;
  if (stopped === false) { // we were paused
    // start again
    requestAnimationFrame(loop);
  }
}

<button id="btn_start">start the loop</button>
<button id="btn_stop">stop the loop</button>
<button id="btn_switch">switch the loop</button>

<pre id="log"></pre>