单击循环停止动画(问题）

Cycling Stop Animation by Clicking (Issue)

本文关键字：问题 动画 循环 单击      更新时间：2023-09-26

我遇到的问题与用户单击动画的最后一帧时动画冻结有关。我做了一个JSFiddle。当动画处于最后一帧时单击，它将冻结。当用户点击时，我尝试了一些方法来阻止这样的输入。

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

但无济于事。这可能是一些简单的事情，我只是不知道。

试试这个-

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/

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

在案例6上设置断点并逐步通过。

这就是我实现这一目标的方式，看，我在你的代码中做了一些更改：

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;

演示

相关文章：