PHP Classes

File: JS_toolbucket/Animator.js

Recommend this page to a friend!
  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: 12 years ago
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; }