Mootools Animations without Tween or Morph

So I found that Tween and Morph did not do what I wanted, and that it would be pretty simple to cook a batch of javascript animation up in no time. The secret to animation is the LOOP. With javascript, you may set up a direct loop, but that would be less then adequate as far as I am concerned. The idea is that you render something, and put a little delay in there to have the render realized.

In javascript this can be accomplished by chaining setInterval functions together – much like:

function dosomething(){

if ( dosomthingelse){

setInterval ( dosomething, 1000/30 ) ;

}

}

Be sure to give yourself a little escape pod ( if test for exit loop ) or you won’t get back to earth.

The mootools Example is like this:

var tween = function(selector,properties,values,duration){
 this.selector = selector ;
 this.properties = properties ;
 this.values = values ;
 this.currentvalues = [];
 this.duration = duration ;
 this.currentstep = 0 ;

 this.steps = this.duration / 50 ;
 this.ratio = 1 / this.steps ;
 if ( isNaN ( this.steps ) ){
 throw "Steps is not a number" ;
 }
 this.tween = function(){
 this.currentstep ++ ;
 for ( v = 0 ; v < this.values.length ; v++ ){
 this.currentvalues[v] = this.currentstep * this.ratio * (this.values[v][0]-this.values[v][1]);
 $$(this.selector).setStyle(this.properties[v],(this.values[v][0]-this.currentvalues[v]) + "px");
 }
 if ( this.currentstep <= this.steps ){
 setTimeout ( this.tween, 50 ) ;
 }
 }
 return this ;
}

The Mootools example above, merely uses the $$ selector of mootools to set the properties and select the element, whereas the code here does most of the calculating of property values for each step and performs the loop. Please note that this is a really simple linear animation calculation and won’t be pretty for doing smooth arc type animations. Such a thing could however be done using a different type of interpolation.

The basics of this allows you to pass in a selector, an array of properties, an array of starting and ending points, and a time for duration.

Look below for an example:

tween(".web_site_header",["width","left"],[[2000,w],[-1000,wd2]],1000).tween();