EaselJS animate though frames based in current frame

问题

I'm working with EaselJS SpriteSheets and I want to know how I can make my hero stop running smoothly, So if the SpriteSheet is playing the "run" animation and it's on frame 5, I'll need to animate though frames 6, 7, 8, 8, 8, 7, 6, 5 and then stop on 0 in order make my hero stand still. How can I do that?

Here's my SpriteSheet:

^{Note that the frames aren't consecutive: They go from 0 to 4, 4 to 0 then 5 to 8. Frame 9 is unused.}

Here's my SpriteSheet code:

user.hero.bmp = new createjs.Bitmap("Graphics/Fox.png");
user.hero.bmp.cache(0, 0, user.hero.bmp.image.width, user.hero.bmp.image.height);
var data = new createjs.SpriteSheet({
    images: [user.hero.bmp.cacheCanvas],
    frames: {
        width: 30,
        height: 40
    },
    animations: {
        stand: 0,
        run: {
            frames: [0,1,2,3,4,4,4,3,2,1,0,5,6,7,8,8,8,7,6,5],
            next: true,
            speed: .75
        }
    }
});
user.hero = new createjs.Sprite(data, "stand");
// Removed lots of non-relevant things here
movableObjContainer.addChild(user.hero);
movableObj.push(user.hero);

Here's the function I use to change between animations:

function changeAnimation(obj, frameOrAnimation) {
    if (obj.animation != frameOrAnimation) {
        obj.animation = frameOrAnimation;
        obj.gotoAndPlay(frameOrAnimation);
    }
}

Function usage: changeAnimation(user.hero, "stand");

and here's the most important part, the animation logic that runs inside ticker:

if ((user.input.left || user.input.right) && !user.hero.jumping) {
    changeAnimation(user.hero, "run");
} else if (!user.hero.jumping && user.hero.animation != "stopFalling" && user.hero.animation != "almostFalling") {
    changeAnimation(user.hero, "stand");
}

回答1:

When re-formulating my question I understood my problem better and solved it. Thank you, StackOverflow.

So, I was thinking I would need to get the actual frame number, and then add/subtract it by 1 every tick until it reaches the frame 0. Unfortunately, this method is overcomplicated and it would, obviously, compromise maintainability.

I've solved my problem by checking if the currentFrame property is equal to zero. if it isn't then the animation proceeds, else, the animation stops.

Here's the resulting code:

if ((user.input.left || user.input.right) && !user.hero.jumping) {
    changeAnimation(user.hero, "run");
} else if (!user.hero.jumping && user.hero.animation != "stopFalling" && user.hero.animation != "almostFalling") {
    if (!(user.hero.animation == "run" && user.hero.currentFrame != 0)) {
        changeAnimation(user.hero, "stand");
    }
}

来源：https://stackoverflow.com/questions/24966393/easeljs-animate-though-frames-based-in-current-frame

标签

javascript

animation

html5-canvas

easeljs

sprite-sheet