Run: Universal JavaScript Animation Framework
Written by on November 13th, 2006 in Ajax News.
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:
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
});
};
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
});
};
Source: Ajaxian
Original Article: http://ajaxian.com/archives/run-universal-javascript-animation-framework