Javascript Easeljs中动画的奇怪行为

我才刚开始学习Javascript，所以我在EaselJs中的动画方面遇到了一些麻烦。我试图在鼠标点击时移动对象（这是我所期望的），但当我试图以适当的方式添加运动动画时，我的动画不会动作，只是在对象移动时在一帧处停止。下面是main.js的代码和问题示例：

var画布；
var期；
var imgCharRun=新图像（）；
var imgCharIdle=新图像（）；
var bmpAnimation；
var canvasx；
var isClicked=false；
函数init（）{
canvas=document.getElementById（'canvas'）；
canvasx=canvas.offsetLeft；
imgCharRun.src=“monsterRun.png”；
imgCharIdle.src=“monsterIdle.png”；
startGame（）；
}
函数startName（）{
stage=newcreatejs.stage（画布）；
阶段.启用（10）；
var spriteSheet=new createjs.spriteSheet({
图片：[imgCharRun，imgCharIdle]，
帧：{宽度：64，高度：64，regX:32，regY:32}，
动画：{
步行：[0,9，“步行”]，
空闲：[10,20，“空闲”]
}
});
bmpAnimation=新建createjs.BitmapAnimation（精灵表）；
bmpAnimation.gotoAndPlay（“空闲”）；
bmpAnimation.scaleX=1；
bmpAnimation.x=canvas.width/2；
bmpAnimation.y=canvas.height-100；
bmpAnimation.currentFrame=9；
阶段。添加儿童（bmpAnimation）；
createjs.Ticker.addListener（窗口）；
createjs.Ticker.useRAF=true；
createjs.Ticker.setFPS（30）；
}
document.onmousedown=函数（e）{
isClicked=true；
window.mousex=e.clientX-canvasx；
}
函数isMouseClicked（）{
如果（已单击）{
moveToMouse（）；
}
}
函数moveToMouse（）{
if（bmpAnimation.xmousex）{
bmpAnimation.x-=5；
bmpAnimation.gotoAndPlay（“步行”）；
bmpAnimation.scaleX=1；
}
}
函数tick（）{
stage.update（）；
IsmouseClacked（）；
}

---

请帮我解决这个问题：

鼠标按下时，您在每一帧调用

gotoAndPlay（“行走”）

，因此它会不断将动画设置为行走动画的第一帧。您需要一个标志来指示动画是否已经运行，并确保只调用一次。

问题已解决，谢谢。这是我想要的：

谢谢，我会尽力做到的。但是如果我将面临一个问题，我能指望你的帮助吗？好的，我已经修改了一些东西来修复这个错误，但是出现了另一个问题。现在动画只是偶尔停止，我知道它的原因。之前，我尝试通过简单地从字符的.x坐标中添加或减去5个像素来进行基本运动。但是如果我想让character在character.x==mouse.x时停止，那么问题就出现了，因为character.x与mouse.x非常接近，而不是==mousex。我如何才能不移动鼠标单击？@Rustem-使用距离测量而不是精确检查：

Math.abs（currentX destinationX）>阈值

。

var canvas;
var stage;
var imgCharRun = new Image();
var imgCharIdle = new Image();
var bmpAnimation;
var canvasx;
var isClicked = false;

function init() {
    canvas = document.getElementById('canvas');
    canvasx = canvas.offsetLeft;
    imgCharRun.src = "monsterRun.png";
    imgCharIdle.src = "monsterIdle.png";
    startGame();
}

function startGame(){
    stage = new createjs.Stage(canvas);
    stage.enableMouseOver(10);

    var spriteSheet = new createjs.SpriteSheet({
    images: [imgCharRun, imgCharIdle], 
    frames: {width: 64, height: 64, regX: 32, regY: 32}, 
    animations: {   
    walk: [0, 9, "walk"],
    idle: [10, 20, "idle"]
    }
    });
    bmpAnimation = new createjs.BitmapAnimation(spriteSheet);
    bmpAnimation.gotoAndPlay ("idle");
    bmpAnimation.scaleX = 1;
    bmpAnimation.x = canvas.width/2;
    bmpAnimation.y = canvas.height-100;
    bmpAnimation.currentFrame = 9;
    stage.addChild(bmpAnimation);
    createjs.Ticker.addListener(window);
    createjs.Ticker.useRAF = true;
    createjs.Ticker.setFPS(30);
}
document.onmousedown = function(e) {
    isClicked = true;
    window.mousex = e.clientX-canvasx;
}

function isMouseClicked() {
    if (isClicked){
        moveToMouse();
    }
}

function moveToMouse() {
    if(bmpAnimation.x<mousex) {
        bmpAnimation.x+=5;
        bmpAnimation.gotoAndPlay("walk");
        bmpAnimation.scaleX = -1;
    }
    if(bmpAnimation.x>mousex) {
        bmpAnimation.x-=5;
        bmpAnimation.gotoAndPlay("walk");
        bmpAnimation.scaleX = 1;
    }

}
function tick() {
    stage.update();
    isMouseClicked();
}