“等待”的其他方式在 JavaScript 动画期间

Question

我正在寻找另一种方法来执行此代码：

$.each($("#gallery > img"), function(index,curImg) {

        setTimeout(function() {
            clearCanvas();
            cvsCtx.drawImage(curImg,0,0);
        } , index*animationMs);

    });

此代码每隔animationMs将图像从我的画廊绘制到我的画布上。 但我想用“播放/停止”按钮来停止动画，我不能这样做...... 有什么想法或解决方法吗？谢谢 ！！

Answer 1

我无法测试它。但是您可以通过使用变量来保存 setTimeout 函数来停止动画，如下所示：

var x; // public var
....
x = setTimeout(......);
// To stop it use:
clearTimeout(x);

希望这对您有用

Answer 2

我发现在循环中创建超时通常很难管理 - 您不想取消多个超时。最好让执行工作的函数通过在完成之前设置超时来调用自身（间接），因为这样您就可以放入一个简单的 if 测试来决定是否设置下一个超时并继续动画。

也许有点像这样：

<input id="playPause" type="button" value="Play">

<script>    
function initAnimation(animationMs, autoRepeat, waitForPlayButton) {
    var currentFrame = 0,
        $imgList = $("#gallery > img"),
        paused = waitForPlayButton;

    function drawNext() {
       clearCanvas();
       cvsCtx.drawImage($imgList[currentFrame++],0,0);

       if (currentFrame >= $imgList.length) {
           currentFrame = 0;
           if (!autoRepeat) {
              paused = true;
              $("playPause").prop("value", "Play");
           }
       }
       if (!paused)
           setTimeout(drawNext, animationMs);
    }

    $("playPause").prop("value", waitForPlayButton ? "Play" : "Pause")
                  .click(function() {
                      this.value = (paused = !paused) ? "Play" : "Pause";
                      if (!paused)
                         drawNext();
                  });
    if (!waitForPlayButton)
       drawNext();
}

initAnimation(100, true, false);
</script>

如果 autoRepeat 参数为 false，动画将运行一次并停止，但可以通过按钮重新启动，否则（显然）它只是不断重复。

如果 waitForPlayButton 为 false，动画将立即开始，否则（显然）它将在按下按钮时开始。

按下该按钮将暂停在当前帧。

（未经测试，因为我手边没有一堆图像，但我确信您明白了并且可以自己解决任何问题。或者如果您遇到错误，请告诉我......）

Answer 3

var images = $("#gallery > img").clone(), interval;

function startLoop() {
  interval = setInterval(function(){
      var image = images[0];
      clearCanvas();
      cvsCtx.drawImage(image,0,0);
      images.append(image);
  }, animationMs);
}

$(".stop").click(function() {clearInterval(interval);});
$(".start").click(startLoop);

Answer 4

setTimeout 返回一个超时ID，可以将其作为参数传递给clearTimeout 以阻止超时发生。

您可以在以下位置阅读更多相关信息： https://developer.mozilla.org/en/DOM /window.setTimeout

祝你好运

Answer 5

它并不是真正的动画...但仍然是：

$("#gallery > img").each(function(index,curImg) {
    $(this).delay(index*animationMs).queue(function(next) {    
       clearCanvas();
       cvsCtx.drawImage(curImg,0,0);
       if (next) next();
    });
});

像我一样使用 jQuery 队列允许您在 $("#gallery > img") 上执行 .stop(true), code> 或单个图像并停止其“动画”。

Answer 6

首先，您可以将图像添加到 JavaScript 数组变量（最终是全局变量），然后对该数组的所有长度调用函数 cycle()。
您应该将 setTimeout() 调用放在该函数内，并将其分配给变量：var t=setTimeout("cycle()",animationMs); 并执行 clearTimeout(t); 当你想停止动画时。

当然，您也可以将停止动画时所在的帧保存在变量中，并在按下“播放”按钮时从该帧重新开始。