javascript - EaselJS 通过基于当前帧的帧进行动画处理

Question

我正在使用 EaselJS SpriteSheets，我想知道如何让我的英雄停止平稳运行，因此，如果 SpriteSheet 正在播放“运行”动画并且位于第 5 帧，我需要通过帧进行动画处理6, 7, 8, 8, 8, 7, 6, 5，然后停在 0 处，让我的英雄站住。 我该怎么做？

这是我的 SpriteSheet:

^{请注意，帧不是连续的:它们从 0 到 4、4 到 0，然后从 5 到 8。第 9 帧未使用。}

这是我的 SpriteSheet 代码:

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

这是我用来在动画之间切换的函数:

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

函数使用:changeAnimation(user.hero, "stand");

这是最重要的部分，即在股票代码内部运行的动画逻辑:

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

Answer 1

当重新提出我的问题时，我更好地理解了我的问题并解决了它。 谢谢 StackOverflow。

所以，我想我需要获取实际的帧号，然后每个刻度加/减 1，直到到达第 0 帧。不幸的是，这种方法过于复杂，显然会损害可维护性。

我通过检查 currentFrame 属性是否等于零解决了我的问题。如果不是，则动画继续，否则动画停止。

这是生成的代码:

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