Canvas Fade Effect: Part Two

In the last post on the canvas fade effect, we discussed how to prepare - loading all images before we got started, declaring some necessary variables, setting up a timer for the animation, etc. You'll find a link to the original article at the bottom of this one, if you need to take another look. In the meantime, though, let's move on to the real deal.

Fading

First, the code we're about to discuss:

...
                g.globalAlpha = 0.0;
		var gfunk = function(){fadeInFront(g,images[0],x,y,step, logoSwap);};
		intID = setInterval(gfunk,ANIM_TIMING);
...

function fadeInFront(g, image, x, y, step, callbackFunction){
	if (g.globalAlpha >= 1.0){
		clearInterval(intID);
		doneFadeInYet(g,x,y,step,callbackFunction);
	}else{
		g.clearRect(0,0,g.canvas.width,g.canvas.height); 
		if (stage == 0){ 
			if (g.globalAlpha <= (1-step[stage])){
				g.globalAlpha += step[stage];
			}else{
				g.globalAlpha = 1.0;
			}
			g.drawImage(image,x[stage],y[stage]);
		}else{ 
			var currentAlpha = g.globalAlpha;
			g.globalAlpha = 1.0;
			for (var i=0;i < stage;i++){
				g.drawImage(images[i],x[i],y[i]);
			}
			g.globalAlpha = currentAlpha;
			if (g.globalAlpha <= (1-step[stage])){
				g.globalAlpha += step[stage];
			}else{
				g.globalAlpha = 1.0;
			}
			g.drawImage(image,x[stage],y[stage]);
		}
	}
}

So, here's how this works in a nutshell:

1. We set up a timer to call our fade in function every x number of milliseconds (in our case, every 66 milliseconds, yielding a frame-rate of approximately 15 fps.
2. Within that function, we have several discrete steps. First, we check to see if our global alpha is back to fully opaque yet. If so, we're finished fading in the current image, so we exit out of our fading function and head to the doneFadeInYet function, which I'll discuss in a bit.
3. If we're not done fading in, we want to clear the canvas, and start drawing with our current opacity. Here we have a bit of added complexity if we want to fade in more than one image - if we do, the stage variable will be set above 0, and we'll reset the global alpha to 1 and draw all the images of the previous steps, before restoring the opacity and drawing our current image. If we're still on the first stage, then we'll simply draw our image.
4. Finally, we'll increment the global alpha according the step we've defined for this stage (see part one to clarify what I mean by that).

The outcome of all this is that we'll manage to fade in one image, and with the help of another function, any number of images, one after the other.

Are We Done Yet?

The key to turning the single use fadeInFront function into something capable of fading in as many images as we please is the doneFadeInYet function. So, here it is:

function doneFadeInYet(g, x, y, step, callbackFunction){
	if (stage < totalStages){
		stage++; 
		g.globalAlpha = 0.0;
		var gfunk = function(){fadeInFront(g,image[stage],x,y,step,callbackFunction);};
		var ifunk = function(){intID = setInterval(gfunk,ANIM_TIMING);};
		var to = setTimeout(ifunk,500);
	}else{
		if (callbackFunction != null){
			var to = setTimeout(callbackFunction,500);
		}
	}
}

So what's going on here?

1. First, we're checking to see what stage we're on, and comparing it to the total number of stages, which we defined back in part one.
2. If we haven't reached the final stage yet, then we increment the stage, set the global alpha back to 0, and set up our timer-based functions again to start the fade in effect over again, this time with the next image.
3. Otherwise, we're finished fading images and move on to our callback function - which we'll discuss in part three. For now, though, we have all we need to successfully fade an arbitrary number of images in to the canvas.

Parts

<< Go back to Part One of this tutorial.
Continue on to Part 3 of this tutorial >> Download Source

@Newest:

On God, Justice and the Philosopher King By: Keefer Augustine is sometimes portrayed as a plagiarist of Plato, with Christian flavour. This essay considers the accuracy of this assertion.

Canvas Fade Effect: Part 3 By: Keefer We look at the last aspects of fading in images via the HTML5 Canvas, and how to reverse the process.

Machiavelli, Hobbes and the Foundations of Modern Liberalism By: Keefer Machiavelli and Hobbes are both credited (blamed?) for aspects of modern realist political theory - but perhaps they could better be understood as the progenitors of modern liberalism?

Canvas Fade Effect: Part Two By: Keefer We get into the meat of the fade effect used on the front page.

@See Also:

Canvas Fade Effect: Part 3 By: Keefer We look at the last aspects of fading in images via the HTML5 Canvas, and how to reverse the process.

Canvas Fade Effect: Part Two By: Keefer We get into the meat of the fade effect used on the front page.

Canvas Fade Effect: Part One By: Keefer We discuss how to get the animation set up and images loaded, in preparation for our fade effect.

Canvas and Reference Error By: Keefer Running into security violation errors when trying to get image data from a canvas? Here's some of the why and what of it.

@Popular:

Majora's Mask Clock Flash By: Keefer A downloadable, customizable Flash version of the clock from Majora's Mask.

Canvas Fade Effect: Part One By: Keefer We discuss how to get the animation set up and images loaded, in preparation for our fade effect.

Canvas Fade Effect: Part Two By: Keefer We get into the meat of the fade effect used on the front page.

Canvas and Reference Error By: Keefer Running into security violation errors when trying to get image data from a canvas? Here's some of the why and what of it.