javascript - 如何在 CraftyJS 中做 Tween？

Question

好吧，我已经无计可施了，我无法让 CraftyJS 进行补间。

所以我想做的是，每次蘑菇被击中时，我想检查该蘑菇是否具有组件“Answer”。如果它存在，我将什么都不做。否则，我想显示一个逐渐消失的大红色框。

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

您正在绑定(bind) tween代码执行到 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 中，您以帧而不是毫秒为单位指定持续时间。)