Monday, November 13th, 2006

Run: Universal JavaScript Animation Framework

Category: JavaScript, Library, UI

Run Logo

Andi Kalsch told us about Run (yet another animation framework).

Andi feels that it stands out from the rest due too:

  • intelligent CSS support by using Color/Dimension objects and CSS functions.
  • Event listeners.
  • Easy syntax.
  • Well-documented.
  • Compatible to all current browsers, means Firefox 1+, Opera 8+, Internet Explorer 5.5+, Safari 2+, Konqueror, Swift

Example

Here is the code for the animation of the sun, earth, and moon:

javascript

  1. example3 = function() {
  2.    var year = 2005;
  3.  
  4.    // show earth/moon
  5.    $('earth').style.display = 'block';
  6.    $('moon').style.display = 'block';
  7.  
  8.    var earth = new Run({
  9.        elements: 'earth',
  10.        style: {
  11.            // use Run.SINUS/COSINUS for circular motion
  12.            left: ['0px','280px',Run.SINUS],
  13.            top: ['0px','280px',Run.COSINUS]
  14.        },
  15.        onfirst: function() {
  16.            // count years
  17.            $('year').innerHTML = 'Year: '+year++;
  18.        },
  19.        time:15,
  20.            
  21.        // repeat infinite
  22.        iterations:0
  23.    });
  24.  
  25.    var moon = new Run({
  26.        elements: 'moon',
  27.        style: {
  28.            left: ['0px','95px',Run.SINUS],
  29.            top: ['0px','95px',Run.COSINUS]
  30.        },
  31.        time:1.5,
  32.        iterations:0
  33.    });
  34. };

Run Animation Example

Posted by Dion Almaer at 9:26 am
17 Comments

+++--
3.7 rating from 45 votes

17 Comments »

Comments feed TrackBack URI

Click here for pleasure

Priceless …

Comment by Dan — November 13, 2006

cant even click the link in ie, it asks me to download run-aka-fotos, fine in firefox. Demo is the same, works fine in firefox, get script error’s in ie

Comment by stevef — November 13, 2006

Hey stefev

I tested the whole site in IE 5.5, 6 and 7 among other browsers, on my and some other PCs – where I tested – everything worked well including the downloads, without errors. Please send me your navigator.userAgent by using this url: http://run.aka-fotos.de/index.php#userAgent

In the top of the site appears the code of your userAgent, copy&paste it and send me a mail. I’will do my best to fix the problem.

Comment by Andreas Kalsch — November 13, 2006

Can’t even see the example page, due to PHP errors.

Warning: Unknown(/www/htdocs/v034072/run/examples.php): failed to open stream: Permission denied in Unknown on line 0

Warning: Unknown(/www/htdocs/v034072/run/examples.php): failed to open stream: Permission denied in Unknown on line 0

Warning: (null)(): Failed opening ‘/www/htdocs/v034072/run/examples.php’ for inclusion (include_path=’.:/usr/share/php:..’) in Unknown on line 0

Comment by Tahir Khan — November 13, 2006

It’s working again.

Comment by Andi — November 13, 2006

works great for me in IE

Comment by Mario — November 13, 2006

lame

Comment by Damien — November 13, 2006

To be honest, is this any different from those trendy background fading techniques we used to have on our geocities homepages 10 years ago? Although the code has gotten much more beautiful and modular, I think a lot of these animations are ultimately pointless and will fade away much like the last javascript animation resurgence.

Comment by Mike — November 14, 2006

Very, very NICE!

Comment by Alexander Lomakin — November 14, 2006

I should probably add, the sun and moon rotation thing in like 20 lines of code is pretty nifty =)

Comment by Mike — November 15, 2006

very nice – the only thing that bugs me with all these ultra-lightweight animation frameworks is, that they aren’t ultra-leightweight anymore if they rely on fat frameworks like prototype :-(

Comment by harald — November 16, 2006

You should ask why modern browsers don’t support most important prototype functions. FF 2.0 does the right step with JS 1.7, but tell me about any alternative to prototype. I’m thinking about attaching a lightweight prototype to run: 1. by stripping unused functions – 2. by compressing it. can anybody tell me about a compressed/compressable prototype version?

Comment by Andi — November 16, 2006

@andi: you’re right – of course. i also think, that prototype is bloated. i think for the most apps you could strip out at least half of the code of prototype. don’t get me wrong: prototype is a great piece of code – but if you don’t strip it, it has more then 20 kb even if you compress it and that’s much to big when you only need some (ajax) gimmicks on your website.

Comment by harald — November 17, 2006

Lots of links

Lots of links: When I have so many browser windows and tabs open it’s time to harvest some… here are some links I’ve found this week that I found interesting, and you may too….

Trackback by JD on EP — November 17, 2006

[…] Run: Universal JavaScript Animation Framework, não conhece? Deveria! […]

Pingback by Links comentados via del.icio.us - 8 » Japs — November 30, 2006

If you run PHP you can gzip your prototype to 15Kb.

Comment by Yves Peeters — March 13, 2007

hmmmmm…… demo doesn’t work for me in FF2, but does work in IE7. Perhaps some updating is needed. I, too, like the sun, earth, moon demo.
 
UIZE takes a very object oriented and modular approach to animation. The underpinnings of value automation / interpolation in UIZE is provided as part of the Uize.Fade class. This is something that can be used for any kind of automation, and even non-time based compound value interpolation. Next up is the Uize.Fade.xFactory extension, which extends the Uize.Fade class with factory methods for no fuss fade initiation. Upon this is added the Uize.Fx module that provides Web specific features for fading values of CSS style properties. Like this GX framework, the Uize.Fx.fadeStyle semantics support fading of arbitrary sets of style properties.
 
Some reference links…
 
http://www.uize.com/reference/Uize.Fade.html
http://www.uize.com/reference/Uize.Fade.xFactory.html
http://www.uize.com/reference/Uize.Fx.html
 
Besides generalized style fading, there’s plenty of other animation to be had in the framework, such as in the Uize.Widget.ImageWipe widget…
 
http://www.uize.com/examples/image-wipe.html

Comment by uize — April 6, 2009

Leave a comment

You must be logged in to post a comment.