本文对JS弹性运动的实现方法进行了分析,供大家参考,如下:

描述:像弹簧一样弹跳,最后停下来。

一、加减速运动

1。加快


VaR迈跃= 0;
迈跃+ +;




速度越来越快,最后冲了出来。

2。减速


VaR迈跃= 20;
迈跃—;




速度越来越慢,在下降到0之后,负值开始朝相反的方向移动。

二、弹性运动

1。在目标点的左边,加速;在目标点的右边,减速,例如


如果(DIV1。offsetleft<300){
迈跃=迈跃+ 1; / / =迈跃+ +;
}
别的{
迈跃= ispeed-1;
}




这是最简单的弹性运动,缺点是:加速度是恒定的(它应该根据弹性带改变)。


如果(DIV1。offsetleft<300){
迈跃=迈跃+(300-div1。offsetleft) / 50;
}
别的{
迈跃=迈跃-(DIV1。offsetleft-300) / 50;
}
迈跃=迈跃+(300-div1。offsetleft) / 50;= = >迈跃=迈跃+ 300 / / 50 offsetleft 50-div1;
迈跃=迈跃-(DIV1。offsetleft-300) / 50;= = >迈跃= ispeed-div1。offsetleft / 50 + 300 / 50;




这两个完全一样,所以你不需要,如果/其他


迈跃+ =(300-div1。offsetleft) / 50;
DIV1。风格。左= DIV1。offsetleft +迈跃+ 'px;




缺点2:它不会停止(缺乏摩擦力)


迈跃+ =(300-div1。offsetleft) / 50;
迈跃* = 0.95; / /采取的一部分,越来越小
DIV1。风格。左= DIV1。offsetleft +迈跃+ 'px;




三。摩擦弹性运动

一个更好的结合


迈跃+ =(300-div1。offsetleft) / 5;
迈跃* = 0.7;




注:无功迈跃= 0;定时器的外面,或每次0,它将添加没用啊。

四。整体弹性运动框架


VaR迈跃= 0;
var = 0;
功能startmove(目标、指标){
ClearInterval(obj。定时器);
obj。定时器= setInterval(){()函数(
迈跃+ =(指标对象。offsetleft) / 5;
迈跃* = 0.7; / /计算速度是一个十进制的整数,如果它总是围绕。
左+ =迈跃; / /速度变量,变量可以有小数
如果(Math.abs(迈跃)<1 math.abs(左ITarget)<1){ / /因为迈跃,左是十进制,所以从来没有达到0和靶点可以无限接近
ClearInterval(obj。定时器); / /虽然速度终于接近0,看似运动停止了,但时间仍然是开放的,所以当速度= 0到达目标点,关闭= 0的速度(只是偏右,准备回来的那一刻,速度= 0,同样只是到达目标点向右下运动之一。中间移动后到达目标点,我们必须同时相遇)
obj。风格。左=指标+ 'px '; / /小数不能完全吻合,所以最后让他等于目标点,一般人的眼睛
}
别的{
obj。风格。左=左+ 'px '; / / style.left只能是整数,所以每次数抹去,误差累积。最后,它积累了1-2个像素,和目标。offsetleft +迈跃就不能完全匹配。
}
},30);
};




五。不适用于弹性运动的地方。

这种式样将超过边界。

举个例子,高度,先,然后变小,如果物体本身的高度很小,它可能变成负,那是错误的。

更多有关Javascript相关内容的读者可以看到特别站:Javascript运动效果和Javascript技能总结,切换效果和技能摘要

希望本文能对javascript程序设计有所帮助。