Начиная с функций в CreateJS/Animate

я новичок в Animate/CreateJS, и я хотел бы знать, как заставить это работать. Я хочу, чтобы когда я наводил указатель мыши на один объект, другой отображался от 0 альфа до 1. Я искал в Google, но не могу найти ничего, что помогло бы мне решить эту проблему.

Код такой:

var frequency = 3;
stage.enableMouseOver(frequency);
this.movieClip_1.addEventListener("mouseover", fl_MouseOverHandler);

function fl_MouseOverHandler()
{

// Execute movieclip 2 function

}


var movieClip_2_FadeInCbk = fl_FadeSymbolIn.bind(this);
this.addEventListener('tick', movieClip_2_FadeInCbk);
this.movieClip_2.alpha = 0;

   function fl_FadeSymbolIn()
   {
   this.movieClip_2.alpha += 0.01;
   if(this.movieClip_2.alpha >= 1)
   {
        this.removeEventListener('tick', movieClip_2_FadeInCbk);
   }
}

Заранее спасибо.


javascript createjs animate-cc
person HomerO    schedule 07.03.2017    source источник
comment
Почему этот вопрос помечен как jquery?   -  person Psi    schedule 07.03.2017
comment
ошибся без предупреждения!!!   -  person HomerO    schedule 07.03.2017
comment
Это не AS3, это JS/CreateJS.   -  person Aaron Beall    schedule 07.03.2017
comment
Кроме того, опубликуйте текущее поведение / результат, который вы видите.   -  person Aaron Beall    schedule 07.03.2017
comment
@HomerO Я удалил тег [actionscript-3] и добавил соответствующие теги... пожалуйста, обновите заголовок и описание.   -  person Aaron Beall    schedule 07.03.2017

Ответы (2)


arrow_upward
1
arrow_downward

Код, который вы написали, не за горами. У вас есть тикер альфа-фейда, вам просто нужно добавить прослушиватель тиков, когда вы хотите начать постепенное появление. Также обязательно используйте .bind(this) при передаче любых функций-обработчиков, которые обращаются к this в них, иначе вы столкнетесь с проблемами:

var frequency = 3;
stage.enableMouseOver(frequency);
this.movieClip_1.addEventListener("mouseover", fl_MouseOverHandler.bind(this));

function fl_MouseOverHandler() {
    this.addEventListener('tick', movieClip_2_FadeInCbk);
}

this.movieClip_2.alpha = 0;

var movieClip_2_FadeInCbk = fl_FadeSymbolIn.bind(this);
function fl_FadeSymbolIn() {
   this.movieClip_2.alpha += 0.01;
   if (this.movieClip_2.alpha >= 1) {
       this.removeEventListener('tick', movieClip_2_FadeInCbk);
   }
}

В качестве альтернативы вы можете использовать Tween:

var frequency = 3;
stage.enableMouseOver(frequency);
this.movieClip_1.addEventListener("mouseover", fl_MouseOverHandler.bind(this));

this.movieClip_2.alpha = 0;

function fl_MouseOverHandler() {
    createjs.Tween.get(this.movieClip_2).to({alpha: 1}, 1000);
}
person Aaron Beall    schedule 07.03.2017
comment
Да, понимаю это, но проблема в том, что код, который я разместил, не работает, потому что дайте мне ошибку, не могу получить доступ к альфа-свойству нулевой ссылки на объект, поэтому я знаю, что Movieclip2 не определен, но когда я его определяю, я получаю WSOD . - person HomerO; 07.03.2017
comment
Я не думаю, что ты понимаешь. ;) Во-первых, эта ошибка должна была быть включена в ваш исходный пост. Во-вторых, я смог догадаться, что это была (одна из) ваших ошибок, основываясь на вашем исходном коде, и этот ответ исправляет эту проблему с помощью bind(this) (перечитайте ответ для этой части). Попробуйте код и посмотрите, работает ли он не так, как вы ожидаете. - person Aaron Beall; 07.03.2017
comment
Вы поняли, я снова сделал код вместо того, чтобы копировать/вставлять ваш код. Поэтому я сравню два кода, чтобы узнать, что я делал неправильно. Спасибо! - person HomerO; 07.03.2017

arrow_upward
0
arrow_downward

Все, что вам нужно, это класс Tween:

private var buttonTween:Tween;

button.addEventListener(MouseEvent.ROLL_OVER, onRollOver);
button.addEventListener(MouseEvent.ROLL_OUT, onRollOut);

private function onRollOver(e:MouseEvent):void {
    if (buttonTween && buttonTween.isPlaying) {
        buttonTween.stop();
    }
    buttonTween = new Tween(e.target, "alpha", Elastic.easeOut, button.alpha, 1, 3, true);
}

private function onRollOut(e:MouseEvent):void {
    if (buttonTween && buttonTween.isPlaying) {
        buttonTween.stop();
    }
    buttonTween = new Tween(e.target, "alpha", Elastic.easeOut, button.alpha, 0, 3, true);
}

Не стесняйтесь настраивать параметры так, как вам нужно/хотите.

Чтобы уменьшить дублирование кода, вы можете даже поместить это в функцию, которую вы вызываете всего с несколькими аргументами, например:

private function tweenButtonAlpha(button:ButtonObject, endAlpha:Number):void {
    if (buttonTween && buttonTween.isPlaying) {
        buttonTween.stop();
    }
    buttonTween = new Tween(button, "alpha", Elastic.easeOut, button.alpha, endAlpha, 3, true);
}
person Gareth    schedule 07.03.2017