其他方式JavaScript动画

我正在寻找另一种方式来执行这段代码中“等待”：其他方式JavaScript动画

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

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

    });

此代码借鉴我的画廊图像的每一个animationMs我的画布。但我想通过“播放/停止”按钮可以停止动画，我不能这样做... 任何想法或解决方法？谢谢！！

来源

2012-02-01 jazzytomato

我发现，在一个循环中创建超时通常难于管理 - 你不想不得不取消多次超时。更好的方法是让函数执行工作，通过在完成之前设置一个超时来间接地调用它，因为那样你可以放入一个简单的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参数是假的动画将运行一次，并停止，但可以通过按钮重新启动，否则，（显然），它只是不断重复。

如果waitForPlayButton是假的动画将立即开始，否则（显然）按下按钮时，它会开始。

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

（未测试，因为我没有一堆得心应手的图片，但我敢肯定你的想法，可以自己解决任何问题，或者让你得到错误，我知道...）

来源

2012-02-01 12:08:56 nnnnnn

当我回家时我必须测试这个，但我认为这可能是我的问题的解决方案... – jazzytomato 2012-02-01 13:50:48

这很棒，您的代码“开箱即用”！非常感谢你 – jazzytomato 2012-02-01 15:34:48

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

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

希望这对你的作品

来源

2012-02-01 11:26:30

确实如此，但有N个这样的'x'（对于N张图像），所以你需要跟踪所有这些。 – ori 2012-02-01 11:32:39

是的，我需要跟踪所有图像，所以它不起作用，但无论如何谢谢。我必须尝试其他人 – jazzytomato 2012-02-01 11:55:57

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

来源

2012-02-01 11:26:45 wheresrhys

的setTimeout返回这可以给clearTimeout作为参数传递给一个timeoutID停止发生超时。

你可以阅读更多关于这个在：https://developer.mozilla.org/en/DOM/window.setTimeout

好运

来源

2012-02-01 11:28:41

这不是一个真正的动画...但还是：

$("#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)，$("#gallery > img")或单个图像，并停止他们的“动画”。

来源

2012-02-01 11:30:23 ori

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

当然，你也可以在一个变量保存在您停止动画时是框架，并从该帧恰好重启。

来源

2012-02-01 11:43:12

其他方式JavaScript动画

回答

相关问题