Javascript/Jquery 动画条件问题

Question

我正在开发一个项目，您可以在其中控制屏幕上的 Angular 色。我正在使用一个 Sprite 表，它可以根据您行走的方式更改帧。我已经将其设置为当我按向上箭头键并且动画起作用时它起作用的位置，但现在我无法弄清楚如何实现停止动画的逻辑。

这是我的移动箱开关的样子:

switch (e.which) {

      case 38: //up
        console.log("Up")
        $(".player").finish().animate({
            top: "-=10"
        }, 100);

        animateScript();
        checkCollisions();

        //if collision is detected, bounce back
        if (colliding) {
        $(".player").finish().animate({
            top: "+=20"
        }, 100);
        }

        break;


      case 37: //left
        console.log("Left")
        $(".player").finish().animate({
            left: "-=10"
        }, 100);

        checkCollisions();

        //if collision is detected, bounce back
        if (colliding) {
        $(".player").finish().animate({
            left: "+=20"
        }, 100);
        }

        break;


      case 39: //right
        console.log("Right")
        $(".player").finish().animate({
            left: "+=10"
        }, 100);

        checkCollisions();

        //if collision is detected, bounce back
        if (colliding) {
        $(".player").finish().animate({
            left: "-=20"
        }, 100);  
        }

        break;


      case 40: //down
        console.log("Down")
        $(".player").finish().animate({
            top: "+=10"
        }, 100); 

        checkCollisions();

        //if collision is detected, bounce back
        if (colliding) {
        $(".player").finish().animate({
            top: "-=20"
        }, 100);   
        }

    }

我只在第一种情况下实现了 animateScript() 并且它有效。现在我不知道如何实现我的 stopAnimation() 函数，也不知道在哪里实现。基本上，只要用户停止使用箭头键，就必须触发它。有什么想法吗？

这是动画功能:

var tID; //clear the setInterval()
function stopAnimate() {
clearInterval(tID);
}
 //end of stopAnimate()


function animateScript() {
var    position = 50; //start position for the image slicer
const  interval = 100; //100 ms of interval for the setInterval()
const  diff = 50;     //diff as a variable for position offset
tID = setInterval ( () => {
$('.player').css('background-position', `-${position}px 0px`);
//we use the ES6 template literal to insert the variable "position"
if (position < 1601)
{ position = position + 
diff;}
//we increment the position by 50 each time
else
{ position = 50; }
//reset the position to 50px, once position exceeds 1536px
}
, interval ); //end of setInterval
} //end of animateScript()

Answer 1

如果您想在用户停止按键后调用函数，您需要添加一个keyup事件。就像您的 keydown 事件处理程序一样，您可以检查每个箭头键。希望以下示例对您有所帮助。

const game = document.getElementById('game');

document.addEventListener('keydown', event => {
  event.preventDefault();
  game.textContent = "keyDown: " + event.key;
});

document.addEventListener('keyup', event => {
  event.preventDefault();
  game.textContent = "keyUp: " + event.key;
});

<div id="game">Click on me, then press a key!</div>