Fun with Dojo animation

Best way to learn is by doing. About a year ago when I needed to learn Dojo I created this simple animation. It is also my tribute to Avatar movie.  Click the image to see it in action. It looks really cool on full screen [press F11] 🙂

How it works

When page loads dojo.addOnLoad() fires callback function. First it calculates dimension of the <img> used as background. In this case Avatar wallpaper.  Then it creates overlay <div> with same dimension as background image and insert grid of tiles. Number of tiles is calculated dependending on their width and height set in config object.

var config = {
 cellHeight : 80, //px
 cellWidth : 80, //px
 timerTick: 750, //ms
 fadeOutDurr: 400, //ms
 fadeInDurr: 2200 //ms
};

Each tile has unique ID based on its position in the grid, ID is used for easy referencing of tiles for fading effects. Random tiles  fade in and out revealing portions of the image underneath.  To get next random cell I simply generate two random numbers (max is the number of cols/rows in the grid), compose the ID as x-y and then call dojo.byId(). Each cells also have mouseenter event listener which triggers the same fading effect. When you swift mouse over screen you will see some beautiful ‘waves’ 🙂

//create grid of tiles with StringBuilder

var str = new StringBuilder();
for(var i=0; i<rows; i++) {
	str.append('<div class="row" id="row'+ i + '">');
	for(var j=0; j<cols; j++) {
		str.append('<div class="cell" id="' + i + '-' + j +'" style="height:'+config.cellHeight+'px; width: '+(config.cellWidth-2)+'px"> </div>');
	}
	config.maxY = j;
	str.append('</div>');
}
config.maxX = i;
cellContainer.innerHTML = str.toString();

I use Javascript implementation of StringBuilder for faster string manipulation. It really pays off when building large portions of html in javascript, so I definitely recommend using it.

_fader function takes care of the fadeIn/fadeOut effect. Well, actually it is fadeOut/fadeIn but whatever…Notice the onEnd callback.

function _fader(item) {
	dojo.fadeOut({
		node: item,
		duration: config.fadeOutDurr,
		onEnd: function() {
			dojo.fadeIn({
				node: item,
				duration: config.fadeInDurr
			}).play();
		}
	}).play();
} //_fader()

Now add the event listener for mouseenter. In dojo this is done with the dojo.connect function. You can connect basically almost any object’s method to any listener or other object’s method. It’s very usefull.

dojo.forEach(dojo.query('div.cell'), function(item) {
	dojo.connect(item, 'mouseenter', function () { _fader(item)});
});

And that’s all. For the full source code see the demo.