Javascript 每次单击requestFrameAnimation时，我都要开始一个新动画

我有很多问题

每次单击动画都会加快速度。已解决@Jorge Fuentes González

每次我点击 最后一个动画停止移动已解决@kaido

我已经改变了我能想到的一切，仍然是同一个问题。任何帮助都将不胜感激。谢谢

    function drawFrame(frameX, frameY, canvasX, canvasY) {
      ctx.drawImage(img,
                    frameX * width, frameY * height,
                    width, height,
                    x_click, y_click,
                    scaledWidth, scaledHeight);
    }

    // Number of frames in animation
    var cycleLoop = [3, 2, 1, 0, 7, 6, 5];
    // Position of sprite in sheet
    var currentLoopIndex = 0;
    var frameCount = 0;

    function step() {

      frameCount++;
      if (frameCount < 30) {
        window.requestAnimationFrame(step);
        return;
      }
      frameCount = 0;
      // ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawFrame(cycleLoop[currentLoopIndex++], 0, 0, 0);
      // Starts animation over
      if (currentLoopIndex >= cycleLoop.length) {
        // If you want to loop back in oposite direction after full animation
        cycleLoop.reverse();
        // Reseting position of which sprite to use
        currentLoopIndex = 0;
      }
      window.requestAnimationFrame(step);
    }

    canvas.addEventListener("mousedown", getPosition, false);
    function getPosition(event) {
       x_click = event.x;
       y_click = event.y;

       x_click -= canvas.offsetLeft * 10;
       y_click -= canvas.offsetTop * 10;
       step();
    }

功能绘图框（frameX，frameY，canvasX，canvasY）{
ctx.图纸图像（img，
frameX*宽度，frameY*高度，
宽度，高度，
x_单击，y_单击，
缩放宽度、缩放高度）；
}
//动画中的帧数
var cycleLoop=[3,2,1,0,7,6,5]；
//雪碧在板材中的位置
var currentLoopIndex=0；
var frameCount=0；
函数步骤（）{
frameCount++；
如果（帧数<30）{
window.requestAnimationFrame（步骤）；
返回；
}
帧数=0；
//clearRect（0，0，canvas.width，canvas.height）；
绘图框（cycleLoop[currentLoopIndex++]，0,0,0）；
//重新开始动画
如果（currentLoopIndex>=cycleLoop.length）{
//如果您想在完全动画后沿oposite方向回圈
cycleLoop.reverse（）；
//重置要使用的精灵的位置
currentLoopIndex=0；
}
window.requestAnimationFrame（步骤）；
}
canvas.addEventListener（“mousedown”，getPosition，false）；
函数getPosition（事件）{
x_click=event.x；
y_click=event.y；
x_click-=canvas.offsetLeft*10；
y_click-=canvas.offsetTop*10；
步骤（）；
}

============================== JS小提琴：

---

==============================================

window.requestAnimationFrame在您再次单击时仍在运行，当您单击时，会在动画中每帧添加一个勾号，速度加倍，因为现在每帧调用两次step（）。再次单击时，应使用window.cancelAnimationFrame（）取消上一个动画帧

像这样：

...
var animationID;

//in step() save the id in every call
function step() {
    ...
    animationID = window.requestAnimationFrame(step);
    ...
}

//In getPosition cancel the current animation
function.getPosition(event) {
    ...
    window.cancelAnimationFrame(animationId);
    ...
}

---

如果要运行多个动画，请为每个动画创建一个对象，并使函数step（）成为其属性，然后在step（）内部运行

window.requestAnimationFrame（this.step）

。您还必须将动画所需的每个变量（如

currentLoopIndex

）保存为对象的一部分。

window.requestAnimationFrame在再次单击时仍在运行，当您单击时，每帧向动画添加一个勾号，速度加倍，因为现在每帧调用两次step（）。再次单击时，应使用window.cancelAnimationFrame（）取消上一个动画帧

像这样：

...
var animationID;

//in step() save the id in every call
function step() {
    ...
    animationID = window.requestAnimationFrame(step);
    ...
}

//In getPosition cancel the current animation
function.getPosition(event) {
    ...
    window.cancelAnimationFrame(animationId);
    ...
}

---

如果要运行多个动画，请为每个动画创建一个对象，并使函数step（）成为其属性，然后在step（）内部运行

window.requestAnimationFrame（this.step）

。您还必须将动画所需的每个变量（如

currentLoopIndex

）保存为对象的一部分。

每次单击时，都调用

step（），它将调用
window.requestAnimationFrame（步骤）
，它将调用下一个动画帧。我没有看到任何停止点，因此循环将被永远调用

因此，当您第一次调用
step（）
时，
step（）
将永远被连续调用，如果您再次单击，将再次调用另一个
step（）
“line”，它将调用
window.requestAnimationFrame（步骤）再次出现，因此现在您将有两条“线”调用
step（）
。这就是动画速度加快的原因，因为在每个动画帧上，
step（）
将被调用两次，从而使计算加倍

您需要做的是检查动画是否已经在运行（带有标志）并且不再运行，或者在再次启动
步骤（）之前，先打开
窗口。取消动画帧（ID）
。请注意，每次单击都必须重新启动控制动画的变量，如
frameCount
和
currentLoopIndex

function drawFrame(frameX, frameY, canvasX, canvasY) {
  ctx.drawImage(img,
                frameX * width, frameY * height,
                width, height,
                x_click, y_click,
                scaledWidth, scaledHeight);
}

// Number of frames in animation
var cycleLoop = [3, 2, 1, 0, 7, 6, 5];
// Position of sprite in sheet
var currentLoopIndex = 0;
var frameCount = 0;

var animationid = null;
function step() {

  frameCount++;
  if (frameCount < 30) {
    animationid = window.requestAnimationFrame(step);
    return;
  }
  frameCount = 0;
  // ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawFrame(cycleLoop[currentLoopIndex++], 0, 0, 0);
  // Starts animation over
  if (currentLoopIndex >= cycleLoop.length) {
    // If you want to loop back in oposite direction after full animation
    cycleLoop.reverse();
    // Reseting position of which sprite to use
    currentLoopIndex = 0;
  }
  animationid = window.requestAnimationFrame(step);
}

canvas.addEventListener("mousedown", getPosition, false);
function getPosition(event) {
   x_click = event.x;
   y_click = event.y;

   x_click -= canvas.offsetLeft * 10;
   y_click -= canvas.offsetTop * 10;
   frameCount = currentLoopIndex = 0;
   window.cancelAnimationFrame(animationid);
   step();
}

功能绘图框（frameX，frameY，canvasX，canvasY）{
ctx.图纸图像（img，
frameX*宽度，frameY*高度，
宽度，高度，
x_单击，y_单击，
缩放宽度、缩放高度）；
}
//动画中的帧数
var cycleLoop=[3,2,1,0,7,6,5]；
//雪碧在板材中的位置
var currentLoopIndex=0；
var frameCount=0；
var animationid=null；
函数步骤（）{
frameCount++；
如果（帧数<30）{
animationid=window.requestAnimationFrame（步骤）；
返回；
}
帧数=0；
//clearRect（0，0，canvas.width，canvas.height）；
绘图框（cycleLoop[currentLoopIndex++]，0,0,0）；
//重新开始动画
如果（currentLoopIndex>=cycleLoop.length）{
//如果您想在完全动画后沿oposite方向回圈
cycleLoop.reverse（）；
//重置要使用的精灵的位置
currentLoopIndex=0；
}
animationid=window.requestAnimationFrame（步骤）；
}
canvas.addEventListener（“mousedown”，getPosition，false）；
函数getPosition（事件）{
x_click=event.x；
y_click=event.y；
x_click-=canvas.offsetLeft*10；
y_click-=canvas.offsetTop*10；
frameCount=currentLoopIndex=0；
window.cancelAnimationFrame（animationid）；
步骤（）；
}
每次单击，都会调用
步骤（），它将调用
window.requestAnimationFrame（步骤）
，它将调用下一个动画帧。我没有看到任何停止点，因此循环将被永远调用

因此，当您第一次调用
step（）
时，
step（）
将永远被连续调用，如果您再次单击，将再次调用另一个
step（）
“line”，它将调用
w