JavaScript Tween算法及缓动效果

核心提示： staticfunctioneaseOut(t:Number,b:Number,c:Number,d:Number):Number{return-c*((t=t/d-1)*t*t*t-1)+b;}这是as代码，四个参数分别是：t: current time（当前时间）；b: beginni

staticfunctioneaseOut(t:Number,b:Number,c:Number,d:Number):Number{
　　return-c*((t=t/d-1)*t*t*t-1)+b;
}

这是as代码，四个参数分别是：

t: current time（当前时间）；

b: beginning value（初始值）；

c: change in value（变化量）；

d: duration（持续时间）。

ps：Elastic和Back有其他可选参数，里面都有说明。

那如何在js中利用这些算法呢？可以看到，虽然是as代码，但里面的程序是可以直接放在js里使用的。

我们可以定义一个类，把它这部分放在里面：

varTween={
　　Quad:{
　　　　easeOut:function(t,b,c,d){
　　　　　　return-c*(t/=d)*(t-2)+b;
　　　　}
　　}
}

这样，就可以用Tween.Quad.easeOut取得这个算法了，其他算法也一样处理就行了。

接下来就可以利用这个js的Tween来做一些缓动效果了。

先通过上面的坐标实例说一下算法原理：

x轴是时间，y轴是当前值，b是y轴的初始值，x轴的初始值是0，t是当前时间。当t（x轴）逐渐增加到达d时，当前值（y轴）会到达目标值（b+c）。

想详细理解的话可以找资料看看吧（貌似跟数学关系比较大）。

下面就介绍如何使用这个Tween了，首先b、c、d三个参数（即初始值，变化量，持续时间）在缓动开始前，是需要先确定好的。

举一个简单的例子，一个div要向右缓动，left初始值是50，那么b就是50，要向右移动100，那c就是100，如果知道的是目标值，例如要向右移动到150，那就把目标值150减初始值b就是变化量c了。

至于d的设置就比较灵活，只要符合t是从0向d递增（或递减）就可以了。