Overview | File | Class | Tree | Index | Help
PREV NEXT | FRAMES NO FRAMES

## 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);
    }

Overview | File | Class | Tree | Index | Help
PREV NEXT | FRAMES NO FRAMES

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