EaselJS 动画虽然基于当前帧的帧

Posted 2023-03-25

【中文标题】EaselJS 动画虽然基于当前帧的帧

【英文标题】：EaselJS animate though frames based in current frame

【发布时间】：2014-09-17 22:30:12

【问题描述】：

我正在使用 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");

这是最重要的部分，在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】：

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

所以，我想我需要获取实际的帧号，然后在每个滴答声中将其加/减 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");