I'm having a bit of a problem with the following code. This is the function that I'm calling to create a FadeIn and FadeOut animation on some assets on a simple game I'm developing, using the great CreateJS library. I need to run this code one time for an asset, and then running it over anohter asset when the first function is complete. The function is the following:
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)
}
And the way I'm calling this function is this:
fadeInOut(assets.eiko, 2, stage);
fadeInOut(assets.logo, 3, stage);
I truly don't understand why the second call to the function is running simultaneously with the first one.
Hope you can help me because this is a truly important project for me.
Thank you in advance.
IMHO you need something like this, I made two way example :)
<!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>