其他方式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動畫

回答

相關問題