JavaScript Tween算法及缓动效果

核心提示：本文示例源代码或素材下载 Flash做动画时会用到Tween类，利用它可以做很多动画效果，JavaScript Tween算法及缓动效果，例如缓动、弹簧等等，我这里要教大家的是怎么利用flash的Tween类的算法，其中Linear是无缓动效果，没有以上效果，来做js的Tween算法，并利用它做一些简单的缓动效

本文示例源代码或素材下载

Flash做动画时会用到Tween类，利用它可以做很多动画效果，例如缓动、弹簧等等。

我这里要教大家的是怎么利用flash的Tween类的算法，来做js的Tween算法，并利用它做一些简单的缓动效果。

实例效果

　

效果说明

首先大家到这里下载flash的as脚本（建议看看这里的demo），1.0和2.0都可以（里面的算法都一样）。

例如打开2.0的可以看到几个as文件，每个文件对应一个Tween效果，分别有（参考里面的说明）：

Linear：无缓动效果；

Quadratic：二次方的缓动（t^2）；

Cubic：三次方的缓动（t^3）；

Quartic：四次方的缓动（t^4）；

Quintic：五次方的缓动（t^5）；

Sinusoidal：正弦曲线的缓动（sin(t)）；

Exponential：指数曲线的缓动（2^t）；

Circular：圆形曲线的缓动（sqrt(1-t^2)）；

Elastic：指数衰减的正弦曲线缓动；

Back：超过范围的三次方缓动（(s+1)*t^3 - s*t^2）；

Bounce：指数衰减的反弹缓动。

ps：以上都是自己的烂翻译，希望各位修正。

每个效果都分三个缓动方式（方法），分别是：

easeIn：从0开始加速的缓动；

easeOut：减速到0的缓动；

easeInOut：前半段从0开始加速，后半段减速到0的缓动。

其中Linear是无缓动效果，没有以上效果。

然后看看里面的算法，以Quadratic的easeOut为例：