1

我才刚刚开始学习 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();
}

请帮我解决这个问题：

4

2 回答 2

1

您gotoAndPlay("walk")在鼠标按下时调用每一帧，因此它不断将动画设置为步行动画的第一帧。您需要一个标志来指示动画是否已经在运行，并确保您只调用一次。

于 2014-01-04T16:20:46.663 回答
0

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

于 2014-01-05T17:27:24.437 回答