animation.js

Summary

No overview generated for 'animation.js'


Class Summary
Animation  

var OW_Animation=
{
  time: 15,
  timer: new function()
  {
    var store=[];
    var run=false;
    var interval=0;
    var goStep=function()
    {
      var i=0, noFn=true;
      for(i=0; i<store.length; i++) 
      {
        if(store[i]) 
        {
          store[i]();
          noFn=false;
        }
      }
      if(noFn) stop();
    }
    var stop=function()
    {
      clearInterval(interval);
      run=false;
    }
    var start=function()
    {
      interval=setInterval(goStep, OW_Animation.time);
      run=true;
    }
    this.set=function(fn)
    {
      var i=0;
      while(store[i]) i++;
      store[i]=fn;
      if(!run) start();
      return i;
    }
    this.clear=function(index)
    {
      store[index]=null;
    }
  }
};

/** 
 * To create a animation object.
 * A animation has a counter which will run from 0 to 100. 
 * All properties which are added with a start and a end value will
 * be adjusted relative to that counter. 
 * @constructor 
 */

function Animation(element, speed, onstart, onfinish, accelerationProfile)
{
  var self=this;
  var currentStragedy=null;
  /** @private */
  this.properties=[];
  /** @private */
  this.current=0;
  /** @private */
  this.interval=0;
  /** @private */
  this._isrunning=false;

  /** pointer to style object */
  this.style=element.style;
  /** pointer to element on which the animation is created */
  this.element=element;
  /** the default speed in 	percents */
  this.speed=speed||this.speed;
  /** a callback which will be called befor the animation starts */
  this.onstart=onstart||null;
  /** a callback which will be called when the animation finishes */
  this.onfinish=onfinish||null;
  /** a profile for the speed during the animation */
  this.accelerationProfile=accelerationProfile||this.constant;


};

/** @private */
Animation.prototype.reTestHex=/^#/;
/** @private */
Animation.prototype.convertToRGB=function(string)
{
  if(this.reTestHex.test(string))
  {
    var r=0, g=0, b=0, rgb=[], i=0;
    string=string.slice(1);
    if(string.length==3)
    {
      r=string.slice(0,1);
      r+=r;
      g=string.slice(1,2);
      g+=g;
      b=string.slice(2,3);
      b+=b;
    }
    else
    {
      r=string.slice(0,2);
      g=string.slice(2,4);
      b=string.slice(4,6);
    }
    return [parseInt(r,16), parseInt(g,16), parseInt(b,16)];
  }
  else
  {
    rgb=string.slice(string.indexOf('(')+1,string.indexOf(')')).split(',');
    for( ; i<3; i++) rgb[i]=parseInt(rgb[i]);
    return rgb;
  }

}
/* default speed for a animation i persents */
Animation.prototype.speed=6;

/** @private */
Animation.prototype.reIsColor=/^#|^rgb/;
/** the default acceleration profile */
Animation.prototype.constant=function(x)
{
  return 1;
}
/** a acceleration profile which will start slow, accelerate and slow done to the end */  
Animation.prototype.sine=function(x)
{
  var sin=Math.sin;
  var pi=Math.PI;
  var start=.2;
  return (sin((x)/100*pi))+start;
}
/** a acceleration profile which will start slow and then accelerate */ 
Animation.prototype.accelerate=function(x)
{
  var start=.1;
  return start+x*x/100000;
}

/** @private */
Animation.prototype.stragedyInt=function(prop, current)
{
  return (prop.from+(Math.round(prop.delta*current/100)))+prop.unit;
}

/** @private */
Animation.prototype.stragedyFloat=function(prop, current)
{
  return (prop.from+prop.delta*current/100);
}

/** @private */
Animation.prototype.stragedyColor=function(prop, current)
{
  var i=0, temp=[];
  for( ; i<3; i++) temp[i]=prop.fromRGB[i]+(Math.round(prop.deltaRGB[i]*current/100));
  return 'rgb('+temp.join(',')+')';
}

/** @private */
Animation.prototype.getProperty=function(property)
{
  var i=0, pointer=null;
  for( ; pointer=this.properties[i]; i++)
  {
    if(property==pointer.property) return pointer;
  }
  return null;
}

/** to check if the animation is running */
Animation.prototype.checkRun=function()
{
  return this._isrunning;
}

/** to start the animation */
Animation.prototype.run=function()
{
  var self=this;
  if(!this._isrunning)
  { 
    this._isrunning=true;
    if(this.onstart) this.onstart();
    this.interval=OW_Animation.timer.set(function(){self.onStep()}); 
  }
}

/** @private */
Animation.prototype.onStep=function()
{
  var last=false;
  var temp=null;
  if((this.current+=this.speed*this.accelerationProfile(this.current))>=100)
  {
    this.current=100;
    OW_Animation.timer.clear(this.interval);
    last=true;
  };
  var i=0, prop=null;
  
  for ( ; prop=this.properties[i]; i++)
  {
    this.style[prop.property]=prop.stragedy(prop, this.current);
  }
  if(last)
  {
    this.current=0;
    this._isrunning=false;
    var event=document.createEvent('Event');
    event.initEvent('OWAnimationDone', true, false);
    event.data=this;
    this.element.dispatchEvent(event);
    if(this.onfinish) this.onfinish();
  }
}

/** 
  * to add a animation for a certain property.
  * @param property the property which shall be animated
  * @param from the start value as string
  * @param to the end value as string
  */
Animation.prototype.addAnimation=function(property, from, to)
{
  var strat=null, unit='', delta=0;
  var pointer_here=this.getProperty(property)||(this.properties[this.properties.length]={});
  if(this.reIsColor.test(from))
  {
    pointer_here.property=property;
    pointer_here.from=from;
    pointer_here.to=to;
    pointer_here.fromRGB=this.convertToRGB(from);
    pointer_here.toRGB=this.convertToRGB(to);
    pointer_here.deltaRGB=
    [
      (pointer_here.toRGB[0]-pointer_here.fromRGB[0]), 
      (pointer_here.toRGB[1]-pointer_here.fromRGB[1]), 
      (pointer_here.toRGB[2]-pointer_here.fromRGB[2])
    ];
    pointer_here.stragedy=this.stragedyColor;
  }
  else
  {
    if(property=='opacity')
    {
      strat=this.stragedyFloat;
      from=parseFloat(from);
      to=parseFloat(to);
    }
    else
    {
      strat=this.stragedyInt;
      unit=from.replace(/-?\d*/g,'');
      from=parseInt(from);
      to=parseInt(to);
    }
    pointer_here.property=property;
    pointer_here.unit=unit;
    pointer_here.from=from;
    pointer_here.to=to;
    pointer_here.delta=to-from;
    pointer_here.stragedy=strat;
  }
  return this;
}

/** 
  * to create a animation.
  * @param speed
  * @param onfinish
  * @param accelerationProfile
  * @returns a animation object
  * @see Animation
  */
HTMLElement.prototype.createAnimation=function(speed, onfinish, accelerationProfile)
{
  return new Animation(this, speed, onfinish, accelerationProfile); 
}



Documentation generated by JSDoc on Wed Jan 25 16:46:53 2006