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 param为false，动画将运行一次并停止，但可以通过按钮重新启动，否则（显然）它会不断重复。

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

按此按钮将暂停当前帧。

（没有经过测试，因为我没有一堆图像方便，但我相信你能得到这个想法并且可以自己解决任何问题。或者如果你收到错误就告诉我......）

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返回一个timeoutID，可以将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队列允许你在.stop(true)或{1}}或单个图像上进行$("#gallery > img")并停止他们的“动画”。

Answer 6

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

当然你也可以在一个变量中保存停止动画时的帧，并在按下＆＃34;播放＆＃34;时完全从那个帧重新开始。按钮。

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

6 个答案: