实现JS弹性运动的方法分析

本文对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）；
}；

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

这种式样将超过边界。

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

更多有关Javaｓｃｒｉｐｔ相关内容的读者可以看到特别站：Javaｓｃｒｉｐｔ运动效果和Javaｓｃｒｉｐｔ技能总结，切换效果和技能摘要

希望本文能对javaｓｃｒｉｐｔ程序设计有所帮助。