View RSS Feed

Master_script_maker

Javascript Motion Effects Library

Rating: 10 votes, 3.80 average.
I have created a motion effects library and aptly named it Javascript Motion Effects Library or the Jasme Library. I created it mainly to allow people to do complex effects with little code. Jasme works in firefox 3, safari, IE 7, and all other modern browsers. Jasme can move almost all variables of an object* and is very easy to use. When multiple actions are placed on the object, Jasme goes through a queue. You may use the library as long as you keep the label intact.Example1 Example2 Example3

*I am working on color and background-color for version 0.9
Edit: Fixed a bug where the ease functions would last only half of the duration

Jasme:
Code:
function tweener(duration, id, end, what) {
  /******************************************/
  /*Javascript Motion Effects Library v. 0.85*/
  /********(c) Master Script Maker***********/
  /********www.masterscriptmaker.co.cc*******/
  /********Do not remove this label.*********/
  /******************************************/
    
  this.id=id;
  this.e=end;
  this.dur=duration;
  this.l=this.e/100;
  this.n=this.dur*1000/50;
  this.i=this.l*2.5/this.n/2;
  this.x=0;
  this.t=setTimeout(function() {return false;}, 10000);
  this.c=false;
  this.f=arguments[4]||function() {return false;};
  this.d=[];
  this.p=false;
  this.r=false;
  this.w=[];
  
  switch(what) {
    case "height":
    case "width":
    case "top":
    case "opacity":
    case "color":
    case "left":
      this.w[0]="style";
      break;
    default:
      this.w[0]=false;
  }
  this.w[1]=what;
}
tweener.prototype = {
  get: function() {
    if(!this.w[0]) {
      return document.getElementById(this.id);
    } else {
      return document.getElementById(this.id).style;
    }
  },
  
  changeDuration: function(d) {
    this.dur=d;
    this.n=this.dur*1000/50;
    this.i=this.l*2.5/this.n/2;
  },
  
  ease: function (h) {
    clearTimeout(this.t);
    if(h=="slide") {
      this.slide();
      return;
    }
    if(this.r) {
      var y;
      if(h=="in") {
        y=(100-(-16*Math.pow(2.5-this.x, 2)+80*(2.5-this.x)));
      } else {
        y=(-16*Math.pow(this.x, 2)+80*this.x);
      }
    } else {
      if(h=="in") {
        y=(-16*Math.pow(this.x, 2)+80*this.x);
      } else {
        y=(100-(-16*Math.pow(2.5-this.x, 2)+80*(2.5-this.x)));
      }
    }
    y*=this.l;
    if(this.w[1]=="opacity") {
      this.get().filter="alpha(opacity="+Math.round(y)+")";
      y=y/100;
    }
    if(this.w[1]=="color") {
      y=y>255?255:y;
      var j=Math.round(y).toString(16);
      j=j.length<2?"0"+j:j;
      y="#"+j+j+j;
    } 
    this.get()[this.w[1]]=y;
    if(this.r) {
      if(this.x>0) {
        this.x-=this.i;
        this.t=setTimeout((function(that) {return function() {that.ease(h);};})(this), 50);
        return;
      }
    } else {
      if(this.x<2.5) {
        this.x+=this.i;
        this.t=setTimeout((function(that) {return function() {that.ease(h);};})(this), 50);
        return;
      }
    }
    this.done();
  },
  
  slide: function() {
    clearTimeout(this.t);
    y=this.x*(this.l*100/this.n);
    if(this.r) {
      y=this.l*100-this.x*(this.l*100/this.n);
    }
    if(this.w[1]=="opacity") {
      this.get().filter="alpha(opacity="+y+")";
      y=y/100;
    }
    if(this.w[1]=="color") {
      y=y>255?255:y;
      var h=Math.round(y).toString(16);
      h=h.length<2?"0"+h:h;
      y="#"+h+h+h;
    } 
    this.get()[this.w[1]]=y;
    if(this.x<this.n) {
      this.x++;
      this.t=setTimeout((function(that) {return function() {that.slide();};})(this), 50);
    } else {
      this.done();
    }
  },
  
  go: function(how) {
    var a;
    switch(how) {
      case "in":
        a="in";
        break;
      case "out":
        a="out";
        break;
      case "none":
        a="slide";
        break;
    }
    var arg=arguments[1]||false;
    this.d.push([a, arg]);
    this.start();
  },
  
  stop: function() {
    clearTimeout(this.t);
    this.p=false;
  },
  
  start: function() {
    if(this.c) {
      this.p=true;
      this.ease(this.c);
    } else {
      if(this.d[0]&&!this.p) {
        this.r=this.d[0][1];
        this.c=this.d.shift()[0];
        if(this.r&&this.c!="slide") {
          this.x=2.5;
        }
        this.p=true;
        this.ease(this.c);
      }
    }
  },
  
  done: function() {
    this.f();
    this.p=false;
    this.x=0;
    this.c=false;
    this.r=false;
    this.t=setTimeout((function(that) {return function() {that.start();};})(this), 200);
  }
};
How to use:
Code:
var tween=new tweener(duration in seconds, id, end value, what to change(can be anything accessible by getElementById)[, function to run on completion]);

Submit "Javascript Motion Effects Library" to del.icio.us Submit "Javascript Motion Effects Library" to StumbleUpon Submit "Javascript Motion Effects Library" to Google Submit "Javascript Motion Effects Library" to Digg

Tags: None Add / Edit Tags
Categories
JavaScript & Ajax , Post a JavaScript

Comments