單擊停止動畫（發行）

Question

我遇到的問題與用戶單擊動畫最後一幀時動畫凍結有關。我做了一個JSFiddle。點擊動畫在其最後一幀時，它會凍結。當用戶點擊時，我嘗試過阻止輸入。

if(active === false){ 
    active = true; 
} 

但無濟於事。這可能是簡單的，我只是沒有線索。

Answer 1

嘗試這個 -

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var activeIMG; 
var active = false; 
var frame = 7; 
window.images = { 
    c0: new Image(), 
    c1: new Image(), 
    c2: new Image(), 
    c3: new Image(), 
    c4: new Image(), 
    c5: new Image(), 
    c6: new Image() 
}; 
images.c0.src = 'http://i.imgur.com/Tw3iDG6.png'; //Normal 
images.c1.src = 'http://i.imgur.com/nFS1YYw.png'; //Start 
images.c2.src = 'http://i.imgur.com/f8BYubj.png'; //Boom 
images.c3.src = 'http://i.imgur.com/96N0hLn.png'; //Boom Smoke 
images.c4.src = 'http://i.imgur.com/1iACNo8.png'; //Thick Smoke 
images.c5.src = 'http://i.imgur.com/eZxuXtC.png'; //Lighter Smoke 
images.c6.src = 'http://i.imgur.com/ooZJYa9.png'; //Rounding Smoke 
activeIMG = images.c0; 

$('body').mousedown(function (event) { 
    var chords = ("X: " + event.pageX + "Y: " + event.pageY); 
    if (frame > 6) { 
     active = true; 
     frame = 0; 
    } 
}); 
setInterval(function change() { 
    if (active) { 
     activeIMG = window.images["c" + frame++]; 
     //console.log(activeIMG) 
     active= frame <= 6; 
    } else { 
     activeIMG = window.images["c0"]; 
    }  
}, 150); 

    function draw() { 
     ctx.clearRect(0, 0, canvas.width, canvas.height) 
     ctx.drawImage(activeIMG, 0, 0); 

     requestAnimationFrame(draw); 
    } 
    draw(); 

這裏的演示http://jsfiddle.net/vikrant47/vh9mgwk8/2/

Answer 2

只要您碰到第6幀，您就將active設置爲false，因此它現在「可重新啓動」，您希望在第6幀已經繪製/或第7幀（重複幀1）開始時進行設置。

在案例6上設置一個斷點並逐步完成。

Answer 3

我這是怎麼做到這一點，你看我已經在你的代碼的一些變化：

var test = function(event){ 
    var chords = ("X: " + event.pageX + "Y: " + event.pageY); 
    //alert(chords); 
    active = true; 
}; 

$('body').bind('click',test);//binding click event 

$('body').unbind('click');//unbinding it when animation is going on for preventing unwanted click 
/* made some changes in case 6 also, binding click event once more and set frame to 0 */ 
case 6: 
    activeIMG = images.c6; 
    active = false; 
    frame=0;//most important to make frame from start again 
    $('body').bind('click',test);//binding again 
    break; 

DEMO