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")，因此它会不断将动画设置为步行动画的第一帧。您需要一个标志来指示动画是否已经运行，并确保您只调用一次。

Answer 2

问题解决了，谢谢。这就是我想要的：http://rockfor.us/onMouseRun/index.html

动画在Easeljs中的奇怪行为

2 个答案: