javascript - 如何在CraftyJS中进行补间？

好吧，我不知所措，我无法让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);
                    });
                }
            });
        }

最佳答案

您将tween代码执行绑定(bind)到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);

补间函数将在接下来的600毫秒(30帧)内管理自己的EnterFrame，此后它将触发TweenEnd事件。

(在旧版本的Crafty中，您以帧为单位指定持续时间，而不是以ms为单位。)

关于javascript - 如何在CraftyJS中进行补间？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9136109/