Javascript Animation Thingy

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|39\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
SoCoder -> Snippet Home -> Misc

Cower	Created : 02 April 2010 Edited : 02 April 2010 System : PSP Vita Language : Java Javascript Animation Thingy Bit of code to handle animating stuff in Javascript.
Bit of forewarning: I don't normally code in Javascript. I don't normally write anything for use in a browser, and this is probably not going to work on the likes of IE6 where shit is just broken. Too bad, so sad, moving on. This is a single function you call to have something animated over a period of time. You pass it an id (usually an element id, but it could be anything as long as it's a string), a contextual object, a duration, a function, and the time it takes for a frame to complete in milliseconds (I could have made it frames per second, but I was lazy and this is easier). Every n milliseconds/frame, the function you specified is called with the id, context object, and progress of the animation. Fairly simple, nothing mind-bendingly difficult about it. If the code is bad, say so and say why, since I'd like to improve it if possible, but who the hell cares?, this is SoCoder. var g_timer_seq = 0; var g_animations = {}; // [id] : { // sequence : tag to identify whether or not a new animation has taken over an old animation for an id // func : function to be executed for each progress mark of an animation // timer : the currently-running timer for the animation // } function animate(id, context, duration, fn, millisecondsPerFrame) { var animation = g_animations[id]; g_timer_seq += 1; var seq = g_timer_seq; if (duration <= 0.0) { if (animation != null) { // if the animation is already running, kill it animation.seq = seq; if (animation.timer != null) { clearTimeout(animation.timer); animation.timer = null; } } return; } if (animation == null) { animation = {}; g_animations[id] = animation; } else if (animation.timer != null) { // clear any existing animation clearTimeout(animation.timer); } duration = 1.0 / duration; var start = new Date().getTime(); animation.sequence = seq; // tick function animation.func = function(progress) { if (this.sequence == seq) { // only tick if the animation sequence hasn't changed var progress = (new Date().getTime()-start)*duration; if (progress > 1.0) { progress = 1.0; } this.timer = null; fn(id, progress, context); if (progress < 1.0 && this.timer == null) { // assuming there's still more to animate and the function didn't replace it, continue animating this.timer = setTimeout(function() {animation.func();}, millisecondsPerFrame); } } }; // setup new timer animation.timer = setTimeout(function() {animation.func();}, millisecondsPerFrame); } --v

Comments
Friday, 02 April 2010, 17:26
Cower	I decided to just click edit/save a bunch of times on this, and I noticed that every time, the platform/language thing changes to something random. I have no idea why, but it's hilariously stupid.

Javascript Animation Thingy

Comments