views:

512

answers:

4

I understand how JS is run and I think I understand most of the DOM but I've no idea about animation. Does anybody here know of a good guide that can explain to me how it's done in Javascript?

In addition, should I even consider Javascript for animation? Should I instead be looking to learn flash?

+2  A: 

if your animation is simple, change colors over time, move from x to y in 3 seconds. Javascript is fine. If you want all kinds of wizbang buttons and coordinated rotation of the screen, straight up js + dhtml will be clunky at best. Silverlight vs Flash are you questions at that point. Interestingly enough, you program Silverlight with javascript, and that would be the major benefit to simply upgrading to a faster and more dynamic DOM that is implemented in Silverlight but still writing the same code. Flash programmability is very limited in my experience, you can do anything, but it will be slow and take thousands of lines of code to get there. For simple JS animations look at jQuery or Scriptaculous.

DevelopingChris
Actually, Flash is not always slow and it doesn't always take all that much code.
Moshe
I'm really talking about load times, and productivity on producing it. Sure flash movies are not slow as a performance metric, but its definitely harder to produce a pure code swf than it is to just code up some jquery that makes a button pretty.
DevelopingChris
+1  A: 

Check out a JS animation framework like Bernard Sumption's Animator.js. It's pretty light-weight and has some excellent examples.

Personally, I wouldn't be animating things in JS. Flash FTW.

ninesided
+4  A: 

Avoid flash, its a horrible requirement, uncrawlable by Google, unsopported by a bunch of browsers and systems (eg iPhone) and most importantly: it forces you to reinvent web standards (e.g. scroll bars and whatnot), Javascript on the other hand is easier to maintain and code for in the noscript case.

try scriptaculous for your animations;

note that there are a gazillion JS animation libraries, some really good jQuery comes to mind. Usually they're just a script tag and an onclick event to setup.

Good luck!

/mp

mauriciopastrana
A: 

If you aren't concerned with IE support, you could also try experimenting with the canvas element:

http://developer.mozilla.org/en/Canvas_tutorial/Basic_animations

Emmett