JavaScript Tween算法及缓动效果
2010-09-14 13:34:14 来源:WEB开发网核心提示:本文示例源代码或素材下载 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为例: