JavaScript 弹簧效果

上次做图片滑动展示效果时做了减速效果,就想做一个加速效果。结合起来就想到了下面这个东西,当然只是类似弹簧,而不是真正的弹簧。

先看效果:
固定范围反弹:

范围渐变反弹:

自定范围反弹:

范围:


程序说明:
虽然说的是弹簧效果,但实际上要实现的是定点坐标之间的加速和减速移动。
点到点的移动应该都知道怎么做,这里是通过设置滑动对象的left来实现的。
而减速效果,一般的做法是通过用目标值减当前值除以一个系数(一般为正整数),得到一个步长。
然后当前值加上这个步长作为新的当前值,然后反复取值直到当前值等于目标值。
由于这样得到的步长是越来越小的,而步长就是移动的值,所以就做成减速效果。
那如何做加速效果呢?
由于取不到能对应减速步长的加速的步长(或者有方法我想不到),所以我想了个方法,
一开始先把所有减速的步长算出来,放到一个数组中,作为减速时的步长,那加速的步长就是这个数组的反转了(即倒过来)。
这个部分主要在SetStep()函数中,可参照代码。
其他部分在代码中都有说明。

程序代码:
Code

测试html:
Code

测试代码:
Code

下载完整测试代码
posted @ 2008-05-17 14:41 cloudgamer 阅读(...) 评论(...) 编辑 收藏