EaselJS动画虽然基于当前帧帧 [英] EaselJS animate though frames based in current frame

问题描述

我与EaselJS SpriteSheets工作，我想知道我怎样才能使我的英雄停止运行平稳，所以如果SpriteSheet是打跑的动画，它是在框架5，我需要动画虽然帧6，7，8，8，8，7，6，5，然后停在0，以使我的英雄停滞不前。的我怎么能这样做？的

这里是我的SpriteSheet：

^{注意帧不连续：他们从0到4,4为0，则5至8架9未使用}

这里是我的SpriteSheet code：

  user.hero.bmp =新createjs.Bitmap（图形/ Fox.png）;
user.hero.bmp.cache（0，0，user.hero.bmp.image.width，user.hero.bmp.image.height）;
VAR数据=新createjs.SpriteSheet（{
    图片：[user.hero.bmp.cacheCanvas]
    框架：{
        宽度：30，
        高度：40
    }，
    动画：{
        站立：0，
        跑： {
            框架：[0,1,2,3,4,4,4,3,2,1,0,5,6,7,8,8,8,7,6,5]
            下一篇：真实，
            速度：0.75
        }
    }
}）;
user.hero =新createjs.Sprite（数据，站）;
//删除大量的不相关的东西在这里
movableObjContainer.addChild（user.hero）;
movableObj.push（user.hero）;
 

这是我使用的动画之间切换功能：

 函数changeAnimation（OBJ，frameOrAnimation）{
    如果（obj.animation！= frameOrAnimation）{
        obj.animation = frameOrAnimation;
        obj.gotoAndPlay（frameOrAnimation）;
    }
}
 

函数用法： changeAnimation（user.hero，站）;

，这里是最重要的部分，这里面股票运行动画逻辑：

  IF（（user.input.left || user.input.right）及和放大器;！user.hero.jumping）{
    changeAnimation（user.hero，运行）;
}否则如果（user.hero.jumping＆安培;！＆安培; user.hero.animation =stopFalling＆放大器;！＆安培; user.hero.animation =almostFalling！）{
    changeAnimation（user.hero，站）;
}
 

解决方案

在重新制定我的问题我明白我的问题，更好地解决了与它。 谢谢，计算器。的

所以，我想我需要得到实际的帧数，然后添加/直到它到达第0帧。不幸的是1每滴答减去它，这种方法是过于复杂，它会很明显，妥协可维护性。

我已经通过检查设置currentFrame 属性等于零解决我的问题。如果不是，则动画进行，否则，动画停止。

这里是造成code：

  IF（（user.input.left || user.input.right）及和放大器;！user.hero.jumping）{
    changeAnimation（user.hero，运行）;
}否则如果（user.hero.jumping＆安培;！＆安培; user.hero.animation =stopFalling＆放大器;！＆安培; user.hero.animation =almostFalling！）{
    如果（！（user.hero.animation ==运行＆放大器;＆安培;！user.hero.currentFrame = 0））{
        changeAnimation（user.hero，站）;
    }
}
 

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

解决方案

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

这篇关于EaselJS动画虽然基于当前帧帧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！