Question

我遇到以下代码的问题。这是我正在使用伟大的CreateJS库在我正在开发的一个简单游戏上为某些资产创建FadeIn和FadeOut动画的函数。我需要为资产运行此代码一次，然后在第一个函数完成时在anohter资产上运行它。功能如下：

    function fadeInOut(asset, duration, stage)
    {
      stage.addChild(asset)
      let fadeInOut = setInterval(function()
      {
        asset.alpha += 1 / 24;
        if (asset.alpha >= 1)
        {
          asset.alpha = 1;
          setTimeout(function()
          {
            let fadeOut = setInterval(function()
            {
              asset.alpha -= 1 / 24;
              if (asset.alpha <= 0)
              {
                asset.alpha = 0;
                stage.removeChild(asset);
                clearInterval(fadeOut);
              }
            }, 1000 / 24)
          }, 1000 * duration)
          clearInterval(fadeInOut);
        }
      }, 1000 / 24)
    }

我调用此函数的方式是：

    fadeInOut(assets.eiko, 2, stage);
    fadeInOut(assets.logo, 3, stage);

我真的不明白为什么对该函数的第二次调用与第一次调用同时运行。

希望你能帮助我，因为这对我来说是一个非常重要的项目。

提前谢谢。

Answer 1

恕我直言，你需要这样的东西，我做了两个例子：）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
function init() 
{
    var stage = new createjs.Stage("canvas");
    createjs.Ticker.setFPS(24);  //set some FPS
    createjs.Ticker.addEventListener("tick", stage); //set autiomatic refresh

    //draw some circles for the example usage
    var circle1 = new createjs.Shape();
    circle1.graphics.beginFill("#FF0000").drawCircle(0,0,50);
    circle1.x=100;
    circle1.y=100;
    circle1.alpha=0;
    stage.addChild(circle1);

    var circle2 = new createjs.Shape();
    circle2.graphics.beginFill("#0000FF").drawCircle(0,0,50);
    circle2.x=300;
    circle2.y=100;
    circle2.alpha=0;
    stage.addChild(circle2);

    //first version with function call after the first animation
    createjs.Tween.get(circle1).to({alpha:1},1000).to({alpha:0},1000).call(
        function ()
        {
            createjs.Tween.get(circle2).to({alpha:1},1000).to({alpha:0},1000)
        }
    ); 

    //seconds version: with delay instead of onComplete function, comment first version above, uncomment code below and try
    /*
    createjs.Tween.get(circle1).to({alpha:1},1000).to({alpha:0},1000);
    createjs.Tween.get(circle2).wait(2000).to({alpha:1},1000).to({alpha:0},1000)
    */


}
</script>
</head>
<body onload="init();">
    <canvas id="canvas" width="600" height="400"></canvas>
</body>
</html>

在上一个函数完成之前执行的Javascript函数

1 个答案: