如何取消当前动画并立即使用鼠标事件和 requestAnimationFrame() 开始新动画答案

【问题标题】：How to cancel current animation and immediately start new one with mouse event and requestAnimationFrame()如何取消当前动画并立即使用鼠标事件和 requestAnimationFrame() 开始新动画
【发布时间】：2021-03-12 13:59:35
【问题描述】：

我希望点跟随鼠标光标，例如点击。代码看起来很简单，但每次点击时，点的距离都会变短，而且不会到达目标。

问题是为什么？

代码在这里：

https://jsfiddle.net/thiefunny/ny0chx3q/3/

HTML

<circle r="10" cx="300" cy="300" />

JavaScript

const circle = document.querySelector("circle")

window.addEventListener("click", mouse => {

    const animation = _ => {

        let getCx = Number(circle.getAttribute('cx'))
        let getCy = Number(circle.getAttribute('cy'))

        circle.setAttribute("cx", `${getCx + (mouse.clientX - getCx)/10}`);
        circle.setAttribute("cy", `${getCy + (mouse.clientY - getCy)/10}`);

        requestAnimationFrame(animation)

    }

    requestAnimationFrame(animation)

});

编辑：对于这个任务，我需要 requestAnimationFrame()，而不是 CSS，因为这只是最简单的例子，但我想在后面的动作中添加更多的复杂性，包括多个点、随机参数等，就像我做的那样这里：https://walanus.pl

我花了很多时间进行实验，但我唯一的结论是，在单击事件之后，我应该以某种方式取消当前动画并开始新的动画，以便为下一个动画重新开始。

【问题讨论】：

到达目的地时停止动画帧（不要再次调用 requestAnimationFrame(animation)）。并在您开始新的帧回调时取消任何先前安排的帧回调。在这里，您在页面上点击的次数与您点击的次数一样多，并且一直在努力将点移动到不同的方向。
凯多您好，感谢您的回复。但是，重点是如何“在开始新的帧回调时取消任何先前安排的帧回调”。如果我将动画命名为让 animationName = requestAnimationFrame(animation) 在“动画”函数中，我不能在回调函数的开头使用 cancelAnimationFrame(animationName) 来引用它，因为那时它甚至还没有声明。
另外，我不确定你的意思，因为我不会在任何地方“再次”调用requestAnimationFrame(animation)。我只是初始化它const animation = ...，而不是在动画函数中“递归”调用它，然后最终运行它。

标签： javascript animation requestanimationframe cancelanimationframe

【解决方案1】：

您不需要requestAnimationFrame：

const circle = document.querySelector("circle")

window.addEventListener("click", e => {

  let targetCircleX = e.clientX;
  let targetCircleY = e.clientY;
  let getCx = Number(circle.getAttribute('cx'))
  let getCy = Number(circle.getAttribute('cy'))
  let cx = targetCircleX - getCx;
  let cy = targetCircleY - getCy;
  
  circle.style.transform = `translate3d(${cx}px, ${cy}px, 0)`;
  
});

circle {
  transition-duration: .2s;
}

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500">
  <circle r="10" cx="100" cy="100" />
</svg>

编辑：CSS animations 是一种简单而强大的方法来为网络中的事物设置动画，但是手动控制动画，如果做得好，总是需要更多的工作，即高性能循环、适当的时间等。（顺便说一下，提到的网站不会打扰这些）。因此，为了完整的答案，下面是requestAnimationFrame 的变体

const circle = document.querySelector("circle");

const fps = 60;
const delay = 1000 / fps;
let rafId;

window.addEventListener("click", e => {

    cancelAnimationFrame(rafId);

    let [time, cx, cy, xf, yf] = [0];
    let r = +circle.getAttribute('r');
    let [X, x] = [e.clientX - r, +circle.getAttribute('cx')];
    let [Y, y] = [e.clientY - r, +circle.getAttribute('cy')];
    const decel = 10;
    
    const anim = now => {
        const delta = now - time;
        if (delta > delay) {
            time = now - (delta % delay);
            [x, y] = [x + (X - x) / decel, y + (Y - y) / decel];
            [xf, yf] = [x.toFixed(1), y.toFixed(1)];
            if (cx === xf && cy === yf)
                return;
            circle.setAttribute("cx", cx = xf);
            circle.setAttribute("cy", cy = yf);
        }
        rafId = requestAnimationFrame(anim);
    }

    anim(time);
});

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" style="background: black">
  <circle r="10" cx="100" cy="100" fill="red"/>
</svg>

【讨论】：

你好@syduki，谢谢你的有趣想法，但是我需要requestAnimationFrame()，而不是CSS来完成这个任务，因为这只是最简单的例子，但我想稍后添加更多的复杂性运动，包括多个点、随机参数等，就像我在这里所做的那样：walanus.pl>我用这个请求编辑了我的问题。
@Mikołaj 更新了我的答案以满足您的要求

【解决方案2】：

问题是为什么

好吧，您似乎知道原因：您从不停止动画循环，因此在每一帧它都会尝试转到动画循环开始时的mouse.clientN 位置。然后在下一次单击时，将启动第二个动画循环，与第一个动画循环并行运行，并且两者将相互对抗以走向各自的mouse.clientN 位置。

如您所见，为避免这种情况，您可以使用cancelAnimationFrame 简单地停止前一个循环。所需要的只是动画范围和点击处理程序都可以访问的变量。
然而，让你的动画循环继续下去只会杀死树木。因此，在从animation 内部再次调用requestAnimationFrame 之前，请检查您的代码是否已到达目标位置。

const circle = document.querySelector("circle")
{

  let anim_id; // to be able to cancel the animation loop
  window.addEventListener("click", mouse => {
    const animation = _ => {

      const getCx = Number(circle.getAttribute('cx'))
      const getCy = Number(circle.getAttribute('cy'))
      const setCx = getCx + (mouse.clientX - getCx)/10;
      const setCy = getCy + (mouse.clientY - getCy)/10;

      circle.setAttribute("cx", setCx);
      circle.setAttribute("cy", setCy);
      // only if we didn't reach the target
      if(
        Math.floor( setCx ) !== mouse.x && 
        Math.floor( setCy ) !== mouse.y
      ) {
        // continue this loop
        anim_id = requestAnimationFrame(animation);
      }
    }
    // clear any previous animation loop
    cancelAnimationFrame( anim_id );
    anim_id = requestAnimationFrame(animation)
  });
  
}

svg { border: 1px solid }

<svg viewBox="0 0 500 500" width="500" height="500">
  <circle r="10" cx="100" cy="100" />
</svg>

另外，请注意，您的动画在配备 120Hz 显示器的设备上运行速度会比配备 60Hz 显示器的设备快两倍，在 240Hz 显示器上运行速度甚至更快。为避免这种情况，请使用增量时间。

【讨论】：