<inputid=output3style="position:absolute;top:300;left:300;"/>
<inputid=output1/>
<inputid=output2/>
<br/>
<inputid=output4/>
<script>
functionAnimation(target,targetProperty,closure,precision)
{
closure=closure||function(x){returnx;};
precision=precision||10;
this.handle;
varbeginTime=newDate();
varstopTime=newDate();
this.Begin=function(){
beginTime=newDate();
this.handle=setInterval(
function(){
varnow=newDate();
target[targetProperty]=closure(now.getTime()-beginTime.getTime());
},
precision
);
}
this.Continue=function(){
varnow=newDate();
beginTime.setTime(now.getTime()-stopTime.getTime()+beginTime.getTime());
this.handle=setInterval(
function(){
varnow=newDate();
target[targetProperty]=closure(now.getTime()-beginTime.getTime());
},
precision
);
}
this.Stop=function(duration){
clearInterval(this.handle);
if(duration===undefined)
{
stopTime=newDate();
duration=stopTime.getTime()-beginTime.getTime();
}
elsestopTime.setTime(beginTime.getTime()+duration)
target[targetProperty]=closure(duration);
}
}
functionStoryBoard(Duration,onfinish,flag)
{
onfinish=onfinish||function(){};
varr=newArray();
r.appendAnimation=function(animation)
{
if(animationinstanceofAnimation)
this.push(animation);
}
r.removeAnimation=function(animation)
{
for(vari=0;i<r.length;i++)
{
if(r[i]==animation)
{
r.splice(i,1);
break;
}
}
}
r.start=function(){
for(vari=0;i<r.length;i++)
{
r[i].Begin();
}
setTimeout(
function(){
for(vari=0;i<r.length;i++)
{
r[i].Stop(Duration);
}
},
Duration
);
onfinish();
}
returnr;
}
//////////////////////////////下面是使用方法////////////////////////////////
function$(id)
{
returndocument.getElementById(id);
}
vara1=newAnimation($("output1"),"value");
vara2=newAnimation($("output2"),"width",function(x){returnMath.floor(x/10);});
vara3=newAnimation($("output3").style,"filter",function(x){return"alpha(opacity="+Math.floor(x/5000*100)+")";});
vara4=newAnimation($("output4").style,"width",function(x){returnMath.floor(x*x*x/50000/5000)+"px";});
vars=newStoryBoard(5000);
s.appendAnimation(a1);
s.appendAnimation(a2);
s.appendAnimation(a3);
s.appendAnimation(a4);
s.start();
</script>
<pre>
output1是改变value
output1是改变宽度
output3是淡入
output4是带缓动的宽度
</pre>
【javascript动画效果类封装代码】相关文章：