animation with jQuery

May 7, 2009

animation with jQuery

Filed under: Uncategorized — subzero @ 7:15 am

I have been trying to remade one of the OLE-Nepal activities : “Can And Can’t”

"can and can't" activity snapshot

It seems a little basic, well, I thought it at the begining.
so, after reading how to…tutorials about jQuery and (still reading) “jQuery in Action” book I didn’t found jQuery *really* useful but I must admit that I’m influenced by processingjs.

jQuery has an “animate” function, but seems pretty basic: it’s focused in text/class animation, not properly images. *All* I can do is to “move” objects whitin an area, the good part is that it supports relative moves (+/- number) the bad part is that it only moves in a straight line, the code looks like:

$(".object").<strong class="selflink">animate</strong>( {"right" : "+=10px"}, "slow");

What about easing equations?, what about a trajectories?…

So, if that does not exist.. we must develop it 🙂 so we’re currently thinking what is the best to do:

to develop a animation tool from scratch
to extend jQuery (the animation tool)
to use processingjs

He bad thing about processingjs is that it’s very demanding (talking about performance), so what can we expect in a XO? (ps if you have one, please run some of its demos and talk to us).

What do you think?. byt the way we’re not trying to reinvent the wheel.

Comments (12)

12 Comments »

AFAIK, you have three options for the technology behind animations:
– HTML DOM (jQuery)
– SVG
– (processing.js)
(There’s also stuff like O3D, but that’s not very useful in this case.)

DOM animations tend to be messy, inconsistent and slow. The DOM was not made for stuff like this and it sucks in general, anyway. You can’t get too far with DOM, but it may suit your needs. In this case, extending jQuery animations would be the best way.

SVG should be very good for animations with all kinds of bells and whistles. There’s even this http://plugins.jquery.com/project/svg for manipulating the SVG DOM in a jQuery-ish fashin. The biggest problem with SVG is browser support. Speed could also be an issue.

is very interesting. It was implemented in several leading browsers almost overnight because of its simplicity (it basically just exposes the drawing API of the browser to JS). It also tends to have very good performance, partly because much of the workload is in JS, which is getting faster all the time (JITs, threads in Gears and HTML5, etc.)
The Bespin people decided to use for a text editor of all things and it seems to work fine for them. https://wiki.mozilla.org/Labs/Bespin/FAQ#Why_did_you_use_Canvas.3F

Comment by Lucian — May 7, 2009 @ 9:22 am

Reply
- bah, wordpress didn’t escape my <canvas> tags. The third bullet and the third paragraph refer to it, anyway.
  
  Comment by Lucian — May 7, 2009 @ 10:15 am
  
  Reply
  - Hi lucian,
    
    I have only seen simple SVG drawings, so look for something more complex I found several cliparts (http://openclipart.org/, http://www.youtube.com/watch?v=4wl6hXurUaI&feature=related), SVG also supports animation (replacing gifs??)
    
    with this perspective the jQuery SVG plugin seems useful, just that I’m a bit concerned of the acceptance of Karma if we limit the animation to only SVG
    
    Comment by subzero — May 8, 2009 @ 4:56 am
  - I can’t figure out how to reply to your post, subzero.
    
    Anyway, if Karma’s animation needs aren’t very complex, it could support several back-ends. It’s probably outside the scope of GSoC, but it isn’t unfeasible.
    
    Comment by Lucian — May 8, 2009 @ 11:35 am
  - Anyway, if Karma’s animation needs aren’t very complex, it could support several back-ends. It’s probably outside the scope of GSoC, but it isn’t unfeasible.
    
    agreed, I’ll have to choose one.
    
    btw read this https://developer.mozilla.org/presentations/xtech2005/svg-canvas/ 🙂
    
    keep writing
    
    Comment by subzero — May 8, 2009 @ 7:23 pm
If you choose to extend jquery, I would recommend you to ask the jquery development community about the best way to do so and, if possible, that it gets maintained as part of jquery.

Comment by Tomeu Vizoso — May 7, 2009 @ 10:12 am

Reply
Have you seen this jquery plugin?
http://gamequery.onaluf.org/

Comment by Carol Lerche — May 7, 2009 @ 3:03 pm

Reply
Here is another javascript game engine:
http://code.google.com/p/renderengine/wiki/EngineFeatureList

Here is another js game engine that is tile-based:

http://freshmeat.net/projects/clanfx/

Comment by Carol Lerche — May 7, 2009 @ 3:12 pm

Reply
This is now open-sourced and understands the old Sierra adventure game resources:

http://ajaxian.com/archives/sarien-multiplayer-game-engine-goes-open-source

Comment by Carol Lerche — May 7, 2009 @ 3:19 pm

Reply
Hi I’m the author gameQuery (the jQuery plugin mentioned by by Carol).

This plugin use exclusively DOM, it works on IE but slowly. It provides an easy way to create and manipulate sprite animations, collision, (and transformation in the last version from svn) BUT it will NOT give you more way than jQuery to tune the sprite movement (i.e. no easing equations nor trajectories)

That said don’t hesitate to take a look at the demos to see what can be achieved: http://gamequery.onaluf.org/#demos and ask me if you have any questions.

Comment by Selim — May 11, 2009 @ 3:44 pm

Reply
- Hi Selim!,
  
  IE is is out of our interest, at least it’s not primordial four us.
  We’re focusing in getting simple animation with the above features, maybe you could give us your approach or advice about that.
  
  Thanks for your reply.
  
  btw. Really good job. I like the collision demo, it’s faster with chrome that firefox.
  
  Comment by subzero — May 13, 2009 @ 9:50 pm
  
  Reply
[…] the past post I tell you about “can and can’t” audio troubles. And here I tell you about animation problems using jQuery. The final “can and can’t” […]

Pingback by Animation with JavaScript: that little beast « Karma Project Learn.Teach.Everything — June 9, 2009 @ 2:54 am

Reply