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:

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; } [/javascript]

Posted by Dion Almaer at 7:30 am
1 Comment

3.6 rating from 24 votes

1 Comment »

Comments feed TrackBack URI

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.

Comment by riaguy — October 1, 2008

Leave a comment

You must be logged in to post a comment.