mouseover and mouseout to change texture alpha

[milkAwhat]

I'm having trouble understanding how to make a texture's alpha = 0 when moused over, then when moused out to animate back to alpha = 1. 

 

I understand how to make the texture's alpha = 0 on mouse over, but making it re-animate back to 1 on mouse out is where i get stuck due to the loop. Do I need to make separate request animation functions? 

	<script>// create an new instance of a pixi stage    var stage = new PIXI.Stage(0xf7d117); 	stage.interactive = true;// create a renderer instance.    var renderer = PIXI.autoDetectRenderer(1024, 768);// set renderer to fit to window	renderer.backgroundColor = 0xf7d117;	document.body.appendChild(renderer.view); 	requestAnimationFrame(blurSprite);  // create containers	var container = new PIXI.DisplayObjectContainer();	var bgContainer = new PIXI.DisplayObjectContainer();		bgContainer.scale.x = bgContainer.scale.y = 1.6;// move the container to the center of the screen	container.x = (renderer.width - container.width) / 2;	container.y = (renderer.height - container.height) / 2;	container.width = renderer.width;	container.scale.x = .1875;	container.scale.y = .1875;	stage.addChild(bgContainer);	stage.addChild(container);    var tp;	var alphaFrom = 1;	//Use Pixi's built-in `loader` object to load an image	PIXI.loader		.add([			"assets/tp.png",			"assets/bg.jpg"		]).load(loadImages);	//This `loadImages` function will run when the image has loaded  	function loadImages(){// create a new Sprite using the textur    tp = new PIXI.Sprite.fromImage("assets/tp.png");		bg = new PIXI.Sprite.fromImage("assets/bg.jpg");		// center the sprites anchor point    tp.anchor.x = tp.anchor.y = 0.5;// positioning bottle	 		container.addChild(tp);	bgContainer.addChild(bg);	tp.x = 0;// make the image interactive..			tp.interactive = true;		// set the mouseover callback..	tp.on('mouseover', onButtonOver);	tp.on('mouseout', onButtonOut);	renderer.render(stage);	}	function onButtonOver(){		this.isOver = true;		if(this.isdown) {			return;		}				alphaFrom = 1;		console.log("mouse over");		blurSprite(alphaFrom);	}			function onButtonOut(){		this.isOver = true;		if(this.isdown) {			return;		}		alphaFrom = 0;		console.log("mouse out");		console.log(tp.alpha + "ZZZZZZZZ");		blurSprite(alphaFrom);	}		function blurSprite(alphaFrom) {        console.log(tp.alpha)        tp.alpha -= 0.025;		        if (tp.alpha <= 0) {            tp.alpha = 0;		}					renderer.render(stage);		requestAnimationFrame(blurSprite);	}    function updateAlpha(){tp.alpha = 0.5;}	</script>

[milkAwhat]

So, I placed the requestAnimationFrame inside the mouseover and mouseout and works only once. Is this the route I need to procede, or is this the wrong way of doing this?

// set the mouseover callback..	tp.on('mouseover', onButtonOver);	tp.on('mouseout', onButtonOut);	renderer.render(stage);	}	function onButtonOver(){		this.isOver = true;		if(this.isdown) {			return;		}						console.log("mouse over");		blurSprite();				function blurSprite() {        	console.log()			        	tp.alpha -= 0.025;		        	if (tp.alpha <= 0) {            	tp.alpha = 0;        	}				renderer.render(stage);			requestAnimationFrame(blurSprite);		}	}		function onButtonOut(){		this.isOver = true;		if(this.isdown) {			return;		}				console.log("mouse out");		blurSprite();				function blurSprite() {        	console.log(tp.alpha)        	tp.alpha += 0.125;						if (tp.alpha >= 1) {            	tp.alpha = 1;        	}						renderer.render(stage);			requestAnimationFrame(blurSprite);		}			}

[xerver]

You don't need multiple loops for this. The problem you are having is likely due to the fact that you are creating multiple loops in the first scenario.

 

Each time I mouse in or out a new raf loop is created. Instead you should have a single loop that is always running, and you just change the state of what should happen. In addition the `alphaFrom` value you have isn't even used, so of course it doesn't animate back to 1.

 

The easiest way to help you would be if you put your code into a jsfiddle, codebin, or similar site so we can iterate on it and link to eachother. The code here is so poorly formatted I almost can't read it, and it is hard to keep sharing huge blocks of code.

 

Pseudo code of what you need is:

var targetAlpha = 1,    step = 0.025;function onButtonOver() {    targetAlpha = 0;}funciton onButtonOut() {    targetAlpha = 1;}function animate() {    requestAnimationFrame(animate);    if (targetAlpha == 1 && tp.alpha !== 1) {        tp.alpha += step;    }    else if (targetAlpha === 0 && tp.alpha !== 0) {        tp.alpha -= step;    }    renderer.render(stage);}

Obviously this can be optimized and it isn't the full code, but hopefully that puts you on the right track.