Advanced Search

View RSS Feed

Master_script_maker

Javascript Motion Effects Library

Rate this Entry
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

  1. shijin123's Avatar
    There is a saying that “ A man is not a good man if he doesn’t wear [url=http://www.buytopreplicas.net/]watches[/url]”. Because people think that man who doesn’t wear [url=http://www.buytopreplicas.net/]replica watches[/url] means that he has no conception of time. I went to the shopping mall several days ago, all kinds of brand [url=http://www.buytopreplicas.net/]replica watches[/url] show in the counter. [url=http://www.buytopreplicas.net/replica-rolex-watches.html]Rolex replica Watches[/url], [url=http://www.buytopreplicas.net/replica-Bell-Ross-watches.html]Bell & Ross replica watches[/url], [url=http://www.buytopreplicas.net/replica-Breitling-watches.html]Breitling replica watches[/url] and so on. I am not really want to buy, I am just looking. I believe that there is also many [url=http://www.buytopreplicas.net/]Replica watches[/url] on sale in the counter. But they sell them in a very high price. As I see, it is better for me to order one [url=http://www.buytopreplicas.net/replica-Bvlgari-watches.html]Replica Bvlgari watch[/url] online rather than in the supermarket. They may be the same quality style, but it is much more expensive in the counter. Some people said that : “watches on the men’s wrist are just like the necklaces on pets’ neck” The only difference is that the former is tied up by time, and the latter is tied up by the master. [url=http://www.buytopreplicas.net/]Watches[/url] are also considered as the symbols of confidence, mature and social status. [url=http://www.buytopreplicas.net/replica-Cartier-watches.html]replica Cartier watches[/url] have a strong appeal to the successful men. The excuses for people who don’t like to wear [url=http://www.buytopreplicas.net/]watches[/url] are various. And most of them said that they don’t have enough money to afford a good quality [url=http://www.buytopreplicas.net/]watch[/url], say nothing of famous [url=http://www.buytopreplicas.net/replica-Chopard-watches.html]replica Chopard watches[/url]. But now, please pay your attention on our site, a good opportunity has presented to you. All the [url=http://www.buytopreplicas.net/replica-Hublot-watches.html]Hublot replica watches[/url] on our site are the top quality [url=http://www.buytopreplicas.net/]Replica watches[/url]. You don’t need to cost so much ,but you can enjoy the luxury and happiness of the world famous [url=http://www.buytopreplicas.net/]brand watches[/url]. There is hard for oridinary people to tell the difference with the original ones. [url=http://www.buytopreplicas.net/replica-Burberry-watches.html]Burberry replica watches[/url], [url=http://www.buytopreplicas.net/replica-Officine-Panerai-watches.html]replica Officine Panerai watches[/url] are no more dreams now. Buy [url=http://www.buytopreplicas.net/replica-Omega-watches.html]Omega replica watches[/url] as presents , make you say goodbye to the time without brand [url=http://www.buytopreplicas.net/]watches[/url]. Carry [url=http://www.buytopreplicas.net/replica-Tag-Heuer-watches.html]Tag Heuer replica watches[/url] on hand can help you make good control of your time. If we can seize every seconds, we will get more chance to succeed. Do not be hesitating to ordering those fabulous [url=http://www.buytopreplicas.net/replica-rolex-watches.html]Rolex replica watches[/url]. Get start with [url=http://www.buytopreplicas.net/replica-Franck-Muller-watches.html]Franck Muller replica watches[/url], your dreams are relatively easy to implement. Only start with a good beginning, then you will have a good result.