Easeljs中動畫的奇怪行為

Question

我只是開始學習Javascript，所以我在EaselJs的動畫方面遇到了一些麻煩。 我正在嘗試通過單擊鼠標來移動對象（按我的預期就可以了），但是當我嘗試以適當的方式添加運動動畫時，我的動畫不起作用，只是在對象移動時停在一幀上。 這是main.js的代碼和問題示例： http ://rustem.ucoz.com/onMouseRun/index.html

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();
}

請幫我解決這個問題：

Answer 1

您在鼠標按下時每幀調用gotoAndPlay("walk") ，因此它將動畫不斷地設置為walk動畫的第一幀。 您需要一個標志來指示動畫是否已經在運行，並確保只調用一次。

Answer 2

問題解決了，謝謝。 這是我想要的： http : //rockfor.us/onMouseRun/index.html