如何在CraftyJS中制作补间？

Question

好吧，我已经无计可施了，而且我不能让CraftyJS做一个tween。

所以我想要做的是，每当一个蘑菇被击中时，我想检查这个蘑菇是否有“答案”的成分。如果它存在，我什么也不会做。否则，我会显示一个逐渐消失的红色大方框。

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

您将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);

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

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

Answer 2

这更像是一个元答案:-)

首先，我建议您升级到最新版本，因为它有很多错误修复。为了让您的代码在新版本下运行，您必须做的一些更改是将所有组件和事件更改为Pascal大小写。即EnterFrame => enterframe、canvas => Canvas等。

其次，我认为你应该把这些问题带到Crafty论坛，以获得合适的受众。我发现这个问题的唯一方法是通过谷歌提醒。

获得帮助的最好方法是从这个模板http://jsfiddle.net/mCdUX/62/创建一个jsfiddle，并用一个小的运行示例演示您无法工作的部分。

哦，欢迎来到Crafty社区:-)