Как сделать Tween в CraftyJS? - PullRequest
Новая
       58

Как сделать Tween в CraftyJS?

2 голосов
/ 04 февраля 2012

Хорошо, я в своем уме и не могу заставить 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);
                    });
                }
            });
        }

Ответы [ 2 ]

5 голосов
/ 26 июля 2012

Вы связываете выполнение кода 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);

И функция анимации будет управлять своей собственной EnterFrame в течение следующих 600 мс (30 кадров), после чего она вызовет событие TweenEnd.

(В старых версиях Crafty вы указывали продолжительность в кадрах, а не в мс.)

1 голос
/ 05 февраля 2012

Это больше похоже на мета-ответ: -)

Во-первых, я бы посоветовал вам перейти на последнюю версию, поскольку в ней много исправлений. Некоторые изменения, которые вам нужно будет сделать, чтобы ваш код работал в новом выпуске, - это изменение всех компонентов и событий на оболочку Pascal. Это enterframe => EnterFrame, canvas => Canvas и т. Д.

Во-вторых, я думаю, что вы должны перенести эти вопросы на форум Crafty, чтобы найти нужную аудиторию. Единственный способ, которым я обнаружил этот вопрос, был через оповещение Google.

Лучший способ получить помощь - создать jsfiddle из этого шаблона http://jsfiddle.net/mCdUX/62/ с небольшим запущенным примером, демонстрирующим часть, которую вы не можете получить.

О, и добро пожаловать в сообщество Crafty: -)

...