从 CreateJS / Animate 中的函数开始

Question

我是 Animate/CreateJS 的新人，我想知道如何让它发挥作用。我想要的是当我将鼠标悬停在一个对象上时，另一个从 0 alpha 到 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);
   }
}

提前致谢。

Answer 1

你只需要补间 class:

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);
}

您可以随意自定义参数 need/want。

为了减少代码重复，您甚至可以将它放在一个只用几个参数调用的函数中，如下所示：

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);
}

Answer 2

您编写的代码已经不远了。你有一个 alpha 淡入淡出代码，你只需要在你想要开始淡入时添加 tick 监听器。还要确保在传入任何访问 this 的处理函数时使用 .bind(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);
}

从 CreateJS / Animate 中的函数开始

Starting with functions in CreateJS / Animate

javascript

createjs

animate-cc