Tuesday, September 30th, 2008
Dojo Fishtank
Category: Dojo
Blaine Ehrhart wrote a fun little fish tank using Dojo, as another example of doing animation using JavaScript, which includes the following to give you a taste:
JAVASCRIPT:
-
-
function playBubble (target,newbubble) {
-
var top = parseInt(target.style.top);
-
var left = parseInt(target.style.left);
-
var rand = 50+Math.round(50*Math.random());
-
// Here we detect how far up the page the bubble is so we can fade it out with the dojo.fadeOut function and delete it
-
if (top <= 150) {
-
var fadeOut = dojo.fadeOut({
-
node: target,
-
duration: 200,
-
onEnd: function(){dojo._destroyElement(target);}
-
});
-
fadeOut.play();
-
return true;
-
}
-
// If it's a new bubble then we want to setup it's bubble sequence to go up
-
if (newbubble == 1) {
-
var floatUp = dojo.fx.slideTo({
-
node: target,
-
duration: 10000,
-
properties: {
-
top: {
-
end:"-200",
-
unit:"px"
-
}
-
}
-
});
-
floatUp.play();
-
}
-
// After many random variables are used you get a very bubbly effect when using dojo.fx.slideTo
-
var bubbleEffect = dojo.fx.slideTo({
-
node: target,
-
duration: 1000,
-
properties: {
-
left: {
-
end:(left%2)?(left-rand):(left+rand),
-
unit:"px"
-
}
-
},
-
onEnd: function(){playBubble(target);}
-
});
-
bubbleEffect.play();
-
return true;
-
}
-
3.6 rating from 23 votes
Ah sure, you don’t need flash as long as your animation is extremely simple. Let’s see how much JavaScript it taks to create a character with a smooth animated walk cycle and a multi-layer scrolling background. After you crash every browser except maybe chrome, try the same thing in Flash and see how simple it is.