javascript - 我想每次点击 requestFrameAnimation 时都开始一个新的动画

Question

我遇到了多个问题。

1. 每次点击动画都会变快。 已解决@Jorge Fuentes González
2. 每次我点击最后一个动画停止移动 已解决@Kaiido

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

    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();
    }

================================JS fiddle :

https://jsfiddle.net/HYUTS/q4fazt6L/9/

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

Answer 1

每次点击，都会调用step(); ，这将调用 window.requestAnimationFrame(step); ，这将调用 step()下一个动画帧。我没有看到任何停止点，因此循环将永远被调用。

所以，当您调用step()时第一次，step()将永远连续调用，如果再次单击，则会出现另一个 step() “line”将被第二次调用，这将调用 window.requestAnimationFrame(step);永远，所以现在您将有两条“线路”调用 step() 。这就是动画速度更快的原因，因为在每个动画帧 step()将被调用两次，使计算加倍。

你要做的就是检查动画是否已经在运行(带有标志)并且不要再次运行它，或者window.cancelAnimationFrame(ID)在开始step()之前再次循环。请注意，每次单击时，您都必须重新启动控制动画的变量，例如 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();
}