Dojo Fishtank
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;
-
}
-
