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 40 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.
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