Advanced Search

Results 1 to 9 of 9

Thread: Jasme Library

  1. #1
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default Jasme Library

    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 me to tween as I can in flash. Jasme works in firefox 3, safari, IE 7, and most likely all other modern browsers. Jasme can tween 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]);
    Last edited by Master_script_maker; 02-22-2009 at 03:37 PM.
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@ /\/\@|{
    There are 10 kinds of people in the world, those that understand binary and those that don't.

  2. #2
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    Great job! How long had it taken you?
    Last edited by magicyte; 02-17-2009 at 03:46 AM.

  3. #3
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    It took me about two days straight.
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@ /\/\@|{
    There are 10 kinds of people in the world, those that understand binary and those that don't.

  4. #4
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    Wow. When you say straight, you mean that you kept at it for 2 days, right? That's some pretty good code there.

  5. #5
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    Thanks. Yes, I do mean I kept at it for 2 days.
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@ /\/\@|{
    There are 10 kinds of people in the world, those that understand binary and those that don't.

  6. #6
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    does anyone have any feedback?
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@ /\/\@|{
    There are 10 kinds of people in the world, those that understand binary and those that don't.

  7. #7
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    I can't tell, does it go slower then get faster, then at the end get slower?

    Also, make some more, maybe have divs fly across the screen?
    Jeremy | jfein.net

  8. #8
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    Okay I added two more examples. Be sure to change the duration if you can't see the easing. Example2* Example3
    *(Example2 uses EaseIn for both transitions)
    Last edited by Master_script_maker; 03-01-2009 at 08:36 PM.
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@ /\/\@|{
    There are 10 kinds of people in the world, those that understand binary and those that don't.

  9. #9
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    Updated to version .85. Fixed a bug where ease function would last half of the specified duration.
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@ /\/\@|{
    There are 10 kinds of people in the world, those that understand binary and those that don't.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •