Code Snippet, Javascript Animation Function

Coding Critique is the place to post source code for peer review by other members of DevNetwork. Any kind of code can be posted. Code posted does not have to be limited to PHP. All members are invited to contribute constructive criticism with the goal of improving the code. Posted code should include some background information about it and what areas you specifically would like help with.

Popular code excerpts may be moved to "Code Snippets" by the moderators.

Moderator: General Moderators

Post Reply
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Code Snippet, Javascript Animation Function

Post by Jonah Bron »

Hello, world!

This is a function I wrote for my new website I'm working on. Unlike the Mootools and jQuery animation functions, this allows you to animate anything with a numeric value. Usage is as follows:

[syntax]aniAttr(assign value to object function, start value, end value, duration[, done function[, frames]]);[/syntax]

1. As the animation progresses, the first argument (a function) is provided with the current position. That makes this function very versatile. This trait is necessary because passing by reference is impossible in Javascript.
2. Since the object being changed is never passed to the function, a start value must be provided.
3. The terminal state of the animation
4. The duration argument is the time the animation will last in milliseconds.
5. The done function (optional) is called when the animation is finished.
6. Frames (optional) gives you the option of specifing the total number of frames. It has three options: A) left undefined it will give you a fixed 60fps, B) a positive integer, or C) zero or any negative number will give you a frame count equal to the absolute difference between the start value and the end value. If you want to specify the number of frames, but not the done function, pass null as the done function.

Here is the code.

Code: Select all

function aniAttr(func, ovalue, dvalue, dur, done, frames) {
	if (done == undefined || done == null) var done = function () {};
	if (frames == undefined || frames == null) var frames = (dur/1000) * 60;
	if (frames < 1) frames = Math.abs(Math.round(dvalue) - Math.round(ovalue))
	var fps = frames / (dur / 1000);
	var step = (dvalue - ovalue) / frames;
	var i = 0;
	var t = setInterval(function () {
		if (i < frames) {
			if (i == frames-1) {
				ovalue = dvalue;
			} else {
				ovalue += (dvalue - ovalue) / (frames - i);
			}
			func(ovalue);
			i++;
		} else {
			clearInterval(t);
			done();
		}
	}, 1000/fps);
}
Example use to animate the y position of an HTML element:

Code: Select all

aniAttr( function (x){
        document.getElementById('box').style.top = x+'px';
    }, 0, 30, 600, function (){
        alert('box moved!');
    });
Example use for a countdown:

Code: Select all

aniAttr( function (x){
        document.getElementId('box').innerHTML = 'Only ' + x + ' seconds left!';
    }, 10, 0, 10000, function () {
        alert('time is up!');
    }, 0);
Notice that the frames argument has been set to 0. We only want to count down in whole numbers.

Edit: updated
Last edited by Jonah Bron on Sun Jun 06, 2010 12:25 pm, edited 1 time in total.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Code Snippet, Javascript Animation Function

Post by kaszu »

Few things:
1) What's "suffix" ? I get an error "suffix is not defined".
2) "clearInterval(x);" should be "clearInterval(t);"
3) "frames" I believe should be frames per second, that would make more sense for me

Other than that, love this snippet, possibility to animate custom properties has been in my wish list for long time for jQuery.
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Re: Code Snippet, Javascript Animation Function

Post by Jonah Bron »

Oops! I had already fixed those problems, and I thought I had already put the fixes here :crazy:

Frames is not the fps. It's the total number of frames used in the entire animation, regardless of the value of Duration.
Post Reply