【问题标题】：Cycling Stop Animation by Clicking (Issue)通过单击（问题）循环停止动画
【发布时间】：2014-10-28 16:57:14
【问题描述】：

当用户单击动画的最后一帧时，我遇到的问题与动画冻结有关。我做了一个JSFiddle。当动画在最后一帧时单击它会冻结。当用户点击时，我已经尝试过阻止这样的输入。

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

但无济于事。这可能很简单，我只是不知道。

【问题讨论】：

你想做什么？？？解释

标签： javascript animation

【解决方案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/

【讨论】：

哇，谢谢，这是一种更好的方式来循环浏览图像。

【解决方案2】：

您在点击第 6 帧时将 active 设置为 false，因此它现在可以“重新启动”，您希望在绘制第 6 帧/或第 7 帧时设置它（重复第 1 帧）开始。

在案例 6 上设置断点并单步执行。

【讨论】：

啊谢谢感觉真好。我需要做的就是制作另一个案例，然后将帧设置回零。

【解决方案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

【讨论】：