javascript动画效果类封装代码

<input id=output3 style="position:absolute;top:300;left:300;"/>

<input id=output1 />

<input id=output2 />

<br/>

<input id=output4 />

<script>

function Animation(target,targetProperty,closure,precision)

{

  closure=closure||function(x){return x;};

  precision=precision||10;

  this.handle;

  var beginTime=new Date();

  var stopTime=new Date();

  this.Begin=function(){

    beginTime=new Date();

    this.handle=setInterval(

      function(){

        var now=new Date();

        target[targetProperty]=closure(now.getTime()-beginTime.getTime());

      },

      precision

    );

       }

  this.Continue=function(){

    var now=new Date();

    beginTime.setTime(now.getTime()-stopTime.getTime()+beginTime.getTime());

    this.handle=setInterval(

      function(){

        var now=new Date();

        target[targetProperty]=closure(now.getTime()-beginTime.getTime());

      },

      precision

    );

  }

  this.Stop=function(duration){

    clearInterval(this.handle);

    if(duration===undefined)

    {

      stopTime=new Date();

      duration=stopTime.getTime()-beginTime.getTime();

    }

    else stopTime.setTime(beginTime.getTime()+duration)

    target[targetProperty]=closure(duration);

  }

}

function StoryBoard(Duration,onfinish,flag)

{

  onfinish=onfinish||function(){};

  var r=new Array();

  r.appendAnimation=function(animation)

  {

    if(animation instanceof Animation)

      this.push(animation);

  }

  r.removeAnimation=function(animation)

  {

    for(var i=0;i<r.length;i++)

    {

      if(r[i]==animation)

      {

        r.splice(i,1);

        break;

      }

    }

  }

  r.start=function(){    

    for(var i=0;i<r.length;i++)

    {

      r[i].Begin();

    }

    setTimeout(

      function(){

        for(var i=0;i<r.length;i++)

        {

          r[i].Stop(Duration);

        }

      },

      Duration

    );

    onfinish();

  }

  return r;

}

//////////////////////////////下面是使用方法////////////////////////////////

function $(id)

{

   return document.getElementById(id);

}

var a1=new Animation($("output1"),"value");

var a2=new Animation($("output2"),"width",function(x){return Math.floor(x/10);});

var a3=new Animation($("output3").style,"filter",function(x){return "alpha(opacity="+Math.floor(x/5000*100)+")";});

var a4=new Animation($("output4").style,"width",function(x){return Math.floor(x*x*x/50000/5000)+"px";});

var s=new StoryBoard(5000);

s.appendAnimation(a1);

s.appendAnimation(a2);

s.appendAnimation(a3);

s.appendAnimation(a4);

s.start();

</script>

<pre>

output1是改变value

output1是改变宽度

output3是淡入

output4是带缓动的宽度

</pre>