如何在CraftyJS中做一个Tween？

Question

好吧,我在我的智慧结束,我不能让CraftyJS做一个补间.

所以我想做的是,每当蘑菇被击中,我想检查蘑菇是否有"答案"组件.如果它存在,我什么都不做.否则,我想要显示一个消失的大红色框.

Crafty.c("Mushroom", {
        init: function() {
            this.addComponent("collision");
            this.collision();
            this.onhit("bullet",function(e) {
                this.destroy();
                e[0].obj.destroy();
                if(!this.has("Answer")) {
                    Crafty.e("2D, Tween, color, canvas")
                    .attr({alpha: 1.0, x: 170, y: 100, w:300, h:100})
                    .color("red")
                    .bind("enterframe", function() { //How do i actually get the box to fade?
                        this.tween({alpha: 0.5, x: 170, y: 100}, 30);
                    });
                }
            });
        }

Answer 1

您正在将补间代码执行绑定到EnterFrame事件,这将导致补间从每个帧开始.相反,您只想在您创建的实体上调用补间函数,就像这样

 Crafty.e("2D, Tween, color, canvas")
                .attr({alpha: 1.0, x: 170, y: 100, w:300, h:100})
                .color("red")
                .tween({alpha: 0.5, x: 170, y: 100}, 600);

并且补间函数将EnterFrame在接下来的600毫秒(30帧)内管理它自己,然后它将触发TweenEnd事件.

(在Crafty的旧版本中,您以帧而不是ms指定了持续时间.)