Tuesday, September 30th, 2008

Dojo Fishtank

Category: Dojo

<>p>

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
< view plain text >
  1. function playBubble (target,newbubble) {
  2.     var top = parseInt(target.style.top);
  3.     var left = parseInt(target.style.left);
  4.     var rand = 50+Math.round(50*Math.random());
  5.     // 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
  6.     if (top <= 150) {
  7.         var fadeOut = dojo.fadeOut({
  8.             node: target,
  9.             duration: 200,
  10.             onEnd: function(){dojo._destroyElement(target);}
  11.         });
  12.         fadeOut.play();
  13.         return true;
  14.     }
  15.     // If it's a new bubble then we want to setup it's bubble sequence to go up
  16.     if (newbubble == 1) {
  17.         var floatUp = dojo.fx.slideTo({
  18.             node: target,
  19.             duration: 10000,
  20.             properties: {
  21.                 top: {
  22.                     end:"-200",
  23.                     unit:"px"
  24.                 }
  25.             }
  26.         });
  27.         floatUp.play();
  28.     }
  29.     // After many random variables are used you get a very bubbly effect when using dojo.fx.slideTo
  30.     var bubbleEffect = dojo.fx.slideTo({
  31.         node: target,
  32.         duration: 1000,
  33.         properties: {
  34.             left: {
  35.                 end:(left%2)?(left-rand):(left+rand),
  36.                 unit:"px"
  37.             }
  38.         },
  39.         onEnd: function(){playBubble(target);}
  40.     });
  41.     bubbleEffect.play();
  42.     return true;
  43. }

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.