Monday, November 13th, 2006
Run: Universal JavaScript Animation Framework
Category: JavaScript
, Library, UI
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:
-
-
example3 = function() {
-
var year = 2005;
-
-
// show earth/moon
-
$('earth').style.display = 'block';
-
$('moon').style.display = 'block';
-
-
var earth = new Run({
-
elements: 'earth',
-
style: {
-
// use Run.SINUS/COSINUS for circular motion
-
left: ['0px','280px',Run.SINUS],
-
top: ['0px','280px',Run.COSINUS]
-
},
-
onfirst: function() {
-
// count years
-
$('year').innerHTML = 'Year: '+year++;
-
},
-
time:15,
-
-
// repeat infinite
-
iterations:0
-
});
-
-
var moon = new Run({
-
elements: 'moon',
-
style: {
-
left: ['0px','95px',Run.SINUS],
-
top: ['0px','95px',Run.COSINUS]
-
},
-
time:1.5,
-
iterations:0
-
});
-
};
-
3.8 rating from 39 votes
Priceless …
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
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.
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
It’s working again.
works great for me in IE
lame
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.
Very, very NICE!
I should probably add, the sun and moon rotation thing in like 20 lines of code is pretty nifty =)
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 :-(
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?
@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.
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….
[...] Run: Universal JavaScript Animation Framework, não conhece? Deveria! [...]
If you run PHP you can gzip your prototype to 15Kb.
I like the sun - earth - moon demo. Very elegant.
I’d also recommend checking out the animation demos at http://www.gapjumper.com. In particular, the animate.rotate method makes it easy to apply 2D rotation to multiple elements simultaneously.