JavaScript Tween算法及缓动效果

核心提示： d跟步长配合使用来设置持续时间，例如d设置为100，JavaScript Tween算法及缓动效果(3)，如果设置步长是1，那么从0到100就有100步，我们还可以自己定义一些算法，发挥想象力，即分100次来完成这个过程，步数越多那么持续时间就越长

d跟步长配合使用来设置持续时间，例如d设置为100，如果设置步长是1，那么从0到100就有100步，即分100次来完成这个过程，步数越多那么持续时间就越长。

至于t的变化相当于时间的变化，一般是均匀变化的，每次变化都增加一个步长，当t从0递增（或递减）到d时，缓动就结束了。

要注意的是t是从0开始的，设置步长时必须确定t确实能到达d，如果上面的步长是3，那么t就永远都到不了d了。更好的处理是当t等于或超过d之后，就停止定时器并设置当前值为目标值。

了解了Tween的使用后就可以实现动画效果了。继续上面的例子，已经确定b是50，c是100，d是100，步长是1，使用Tween.Quad.easeOut算法。那么可以用以下程序实现缓动：

varb=50,c=100,d=100,t=0;
functionRun(){
　　div.style.left=Math.ceil(Tween.Quad.easeOut(t,b,c,d))+"px";
　　if(t<d){t++;setTimeout(Run,10);}
}
Run();

一个简单的缓动效果就实现了，要实现不同的缓动，只需要使用对应的Tween算法就行了，以前看来遥不可及的效果，现在这么容易就实现了（当然那些算法才是最难的地方）。

这样关于缓动的效果就介绍完了，但其实远远不止这些，我们还可以自己定义一些算法，发挥想象力，做一些好玩的效果。

<inputid="idClick"type="button"value="click">
<divid="test1"style="position:absolute;width:5px;height:5px;background:#333;font-size:0;"></div>
<divid="test2"style="position:absolute;width:5px;height:5px;background:#F00;font-size:0;"></div>
<script>
varRound={
　　X:function(t,b,r){returnr*Math.cos(t/20)+b;},
　　Y:function(t,b,r){returnr*Math.sin(t/20)+b;}
}
vart=x=y=0;
document.getElementById("idClick").onclick=function(e){
　　document.onmousemove=function(e){
　　　　e=e||event;
　　　　x=e.clientX+document.documentElement.scrollLeft;
　　　　y=e.clientY+document.documentElement.scrollTop;
　　};
　　document.onmousemove(e);
　　setInterval(function(){
　　　　variX=Math.ceil(Round.X(t,x,100)),iY=Math.ceil(Round.Y(t,y,50));
　　　　with(document.getElementById("test1").style){left=iX+"px";top=iY+"px";}
　　　　with(document.getElementById("test2").style){
　　　　　　left=Math.ceil(Round.X(t*5,iX,25))+"px";top=Math.ceil(Round.Y(t*5,iY,25))+"px";
　　　　}
　　　　t++;
　　},10);
}
</script>