Login   Register  
PHP Classes
elePHPant
Icontem

File: JS_toolbucket/Animator.js

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Joseph  >  Rainbow Maker  >  JS_toolbucket/Animator.js  >  Download  
File: JS_toolbucket/Animator.js
Role: Auxiliary data
Content type: text/plain
Description: simple js css-based animation class
Class: Rainbow Maker
Create transparent gradient images
Author: By
Last change:
Date: 2012-02-12 22:29
Size: 2,210 bytes
 

Contents

Class file image Download
function Animator(elmnt, className, numFrames, timePerFrame, animation, whendone)  {

this.elmnt=elmnt;
this.className=className;
this.numFrames=numFrames;
this.timePerFrame=timePerFrame;
this.animation=animation;
this.whendone=whendone;
this.doingSo={animate:false, undo:false};
this.delay=false;
this.frame=0;
	}


Animator.prototype.animate=function()  {
	if (this.doingSo.animate  ||  this.delay!==false)  return;
	if (this.doingSo.undo)  {clearInterval(this.ani);  this.doingSo.undo=false;}
	var temp=this.elmnt.className;  this.elmnt.className=this.className;  this.className=temp;
	var self=this;
	this.delay=setTimeout(   // the browser won't implement the classname until after this.animate exits
		function()  {
			self.delay=false;
			self.doingSo.animate=true;
			self.ani=self.animateCSS( self.elmnt, self.numFrames, 1, self.timePerFrame, self.animation,
					function(e) {
						self.doingSo.animate=false;
						self.frame=self.numFrames;
						if (self.whendone)  self.whendone(e);  } );  },
					1);  }

Animator.prototype.undo=function()  {
	if (this.delay!==false)  {clearTimeout(this.delay);  this.delay=false;}
	if (this.doingSo.animate)  {clearInterval(this.ani);  this.doingSo.animate=false;}
	if (this.doingSo.undo)  return;
	this.doingSo.undo=true;
	var self=this;
	this.ani=this.animateCSS( this.elmnt, this.frame+1, (-1), this.timePerFrame, this.animation,
			function(e) {
				self.doingSo.undo=false;
				self.frame=0;
				if (self.whendone)  self.whendone(e);
				var temp=self.elmnt.className;  self.elmnt.className=self.className;  self.className=temp;  } );  }

Animator.prototype.animateCSS=function(element, numFrames, step, timePerFrame, animation, whendone)  {
	var time=0, intervalID=setInterval(displayNextFrame, timePerFrame);
	if ((typeof step != 'number')  ||  step==0)  step=1;
	var self=this;
	function displayNextFrame()  {
		if (self.frame>=numFrames  ||  self.frame<0)  {
			clearInterval(intervalID);
			if (whendone)  whendone(element);
			return;  }
		for (var cssProp in animation)  {
			try {element.style[cssProp]=animation[cssProp](self.frame, time);}
			catch(e) {alert("¡error!");}  }
		self.frame+=step;
		time+=timePerFrame;  }
	return intervalID;  }