javascript - 如何暂停 JavaScript 动画事件

Question

我制作了一些类似 pacman 的形状，它们在 html5 Canvas 上进行动画处理，当单击页面上的按钮时，它们当前可以跟随鼠标(无论鼠标移动到哪里)。除了跟随光标之外，当按下每个相应的按钮时，对象还可以向四个方向(即左、右、上、下)移动。问题是，一旦单击“跟随”按钮，即使单击任何其他按钮，对象也会继续跟随光标。我需要一种方法来拥有另一个按钮，可以单击该按钮来中断“关注”事件。如果这是不可能的，使用 setInterval 函数调用来设置后续事件的时间限制可能会起作用，但我不确定如何实现。实现此功能的最佳方法是什么？ “跟随”动画的代码如下:

function getMousePos(canvas, evt) {
            var rect = canvas.getBoundingClientRect();
            return {
                x: evt.clientX - rect.left,
                y: evt.clientY - rect.top
            };
        }
        $("#follow").click(function () {
            canvas.addEventListener('mousemove', function (evt) {
                //WokkaWokkas is the array of the pacman objects
                var mousePos = getMousePos(canvas, evt);
                WokkaWokkas[0].posX = mousePos.x - 50;
                WokkaWokkas[0].posY = mousePos.y - 50;
                WokkaWokkas[1].posX = WokkaWokkas[0].posX - 100;
                WokkaWokkas[1].posY = WokkaWokkas[0].posY - 100;

            }, false);
        });

编辑 - 第二个解决方案的相关代码:

 $("#follow").click(function () {
        //not sure if this is the syntax for using (canvas).on
        (canvas).on('mousemove', function (evt) {
            var mousePos = getMousePos(canvas, evt);
            WokkaWokkas[0].posX = mousePos.x - 50;
            WokkaWokkas[0].posY = mousePos.y - 50;
            WokkaWokkas[1].posX = WokkaWokkas[0].posX - 100;
            WokkaWokkas[1].posY = WokkaWokkas[0].posY - 100;
        }, false);
    });
    animationLoop();

$("#up").click(function () {
    $(canvas).off('mousemove');
    WokkaWokkas[0].direction = up;
});
$("#down").click(function () {
    $(canvas).off('mousemove');
    WokkaWokkas[0].direction = down;
});
$("#left").click(function () {
    $(canvas).off('mousemove');
    WokkaWokkas[0].direction = left;
});
$("#right").click(function () {
    $(canvas).off('mousemove');
    WokkaWokkas[0].direction = right;
});
$("#unfollow").click(function () {
    $(canvas).off('mousemove');
    WokkaWokkas[0].posX = 25;
    WokkaWokkas[0].posY = 25;
});

Answer 1

你能不能在按下另一个按钮时就删除事件监听器？

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

function followMouse(evt) {
    //WokkaWokkas is the array of the pacman objects
    var mousePos = getMousePos(canvas, evt);
    WokkaWokkas[0].posX = mousePos.x - 50;
    WokkaWokkas[0].posY = mousePos.y - 50;
    WokkaWokkas[1].posX = WokkaWokkas[0].posX - 100;
    WokkaWokkas[1].posY = WokkaWokkas[0].posY - 100;
}

$("#follow").click(function () {
    canvas.addEventListener('mousemove', followMouse, false);
});

$("#otherBtn").click(function() {
     canvas.removeEventListener('mousemove', followMouse);
});

顺便说一句，如果您已经在使用 jQuery，为什么不也使用他们的事件系统呢？

$(canvas).on('mousemove', function(e) {});
$(canvas).off('mousemove');

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

更新这是因为removeEventListener只删除一个监听器，所以你需要引用该函数