Canvas Fade Effect: Part 3

By: Keefer Posted On: 2011-09-19 09:05:13 Last Modified On: 2011-10-17 07:35:18

So, we now know how to set up an animation, preload our resources, alter the globalAlpha of the canvas to draw images at a given opacity, and layer our images so we can fade new elements in over top of existing ones. So... now what?

Well, on the front page we don't content ourselves with the slighly manic grin of the Sane Method logo - no, we move on to displaying some clickable images for some of the newest articles. I'll show you how to set up the callback function that launches into that. As well, I'll discuss reversing the fade effect - allowing you to fade on image out at a time, until we've returned to our pristine Canvas, ready for the next effect.

Callback

First, the code:


...
var lsOffset = 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){
...
function doneFadeInYet(g, x, y, step, callbackFunction){
  if (stage < totalStages){
		...
	}else{
		// We're done fading in our images - if the callbackFunction is set, call it
		if (callbackFunction != null){
			var to = setTimeout(callbackFunction,500);
		}
	}
}

So, there's all sorts of pieces cut out here, since we've covered them in the earlier tutorials. The main changes we've made are to add a reference to something called logoSwap up where we first call the fadeInFront function. You'll notice that each fadeInFront and doneFadeInYet now also sport a corresponding parameter called callbackFunction.

What's happening here is that we're setting up a call to a later function when we first call our fade in effect. And then, in the check for whether the fade is finished, we add an else statement that says, 'when we're done fading in, call this function after 500 milliseconds'. So what are we calling?

Logo Swap

In order to understand what's going on here, we probably need to look at both the javascript and the html. First, the html:



    


    
	
	    Machiavelli, Hobbes and the Foundations of Modern Liberalism
	    
	    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
	    
	    We get into the meat of the fade effect used on the front page.

So we have to main, encapsulating divs here - one just to contain the canvas, and one that contains the elements we're going to swap into the canvas' place when we're finished with it. Now let's look at the javascript (note: jQuery is used here):


function logoSwap(){
	var doSwap = function(){
		$('#logoContainer').children().fadeOut(500,function(){
			$('#logoContainer').empty().append(
					$($('#logoSwap').children().get(lsOffset)).clone(true)
				).children().hide().fadeIn(500);
			
			if (lsOffset < $('#logoSwap').children().length - 1){
				lsOffset++;
			}else{
				lsOffset = 0;
			}	
		});
	};
	intID = setInterval(doSwap,5000);
}

So, when our logoSwap function is called, it actually assigns an anonymous function to the variable doSwap and then sets that function to be called every 5 seconds. With the function, it, in series: fades out and then empties the logoContainer of its current html contents; appends a clone of one of the children of the logoSwap div into the logoContainer, based upon a variable (lsOffset); hides that element and then fades it in.

So There We Have It: You now know how to set up simple animations in javascript with the Canvas element, and then transition to another effect or process. I'm going to leave working out how to reverse to you, dear reader, as an exercise. Not because I'm tired of writing, no, just because I'm that generous. As usual, if you have any questions, the comment section is waiting for you.