Animating objects in JavaScript

I needed a way to animate any property of an object in JavaScript (not necessarily even an element on the page). I did not find anything satisfactory (to me) online, so I decided to write my own. This is the result.

It's a simple animation class, loosely modeled on the Android animations API (in fact, the built-in animation interpolators are simple translations from the Android source code). It is very flexible, and supports animating any numeric property of any object. Animations run at 60 Hz to be fluid if UI elements are being animated.

Features:

• Animate any numeric value
• Start/stop, pause/resume/restart
• Repeat - for a specified count or infinitely
• Reverse animation on repeat.
• Callbacks for start, stop, resume, end, repeat
• Custom interpolators
• NO dependencies

Download the code here (includes documentation for all methods).

A demo of the code is available here. It simply animates a box moving to the right, but demonstrates how the class is used. Prototype is used in the demo, but not required for the animation class itself.

This class will even work with discrete properties, as long as the animated property callback is written for that (example below).

Example Usage:

//make the y property of the coords object fall and bounce from 100 to 0 in 5 seconds

var coords = {x: 100, y: 100};

new Animation(coords, function(obj, val) { obj.y = val; }, 100, 0, 5000, Animation.Interpolators.Bounce()).start();

//animated a box moving 500px to the right in 1 second

//when the animation is over, set the animation reference to null

var anim = new Animation($("box"), function(obj, val) { obj.style.left = val + "px"; }, 0, 500, 1000, Animation.Interpolators.Accelerate(), {end: function() { anim = null; }});

anim.start();

//animate a continuously-blinking box

var anim = new Animation($("box"), function(obj, val) { obj.setOpacity(val); }, 0, 1, 500, Animation.Interpolators.AccelerateDecelerate());

anim.setRepeat(-1).setRepeatReverse(true);

anim.start();

//can do anim.stop() and anim.resume() to pause/resume the blinking

//animate through a set of discrete values

var colors = ["red", "yellow", "green", "blue", "black"];

var anim = new Animation($("box"), function(obj, val) {

    obj.style.background = colors[Math.floor(val) % colors.length];

}, 0, colors.length, 500 * colors.length, Animation.Interpolators.Linear()).setRepeat(-1).start();

I hope that this will become useful to people working with animations in JavaScript. Please leave feedback and suggestions on how to improve this, or any features that you would like to see.