day39—JavaScript缓冲运动

转行学开发，代码100天！——2018-04-24

 

今天继续学习JavaScript运动之缓冲运动。相对于匀速运动，缓冲运动的不同之处在于其速度值是不断变化的，越靠近目标点，速度越小。

即可以表示为：speed =( iTarget-curPos)/constNum;

做个简单的例子说明一下这个问题：

 

    <input id="btn" type="button" value="开始运动" onclick="startMove(300);">
    <div id="div1">div>

JavaScript部分如下：

(不妨按照上述代码一试)

为了解决这个抖动的问题，通常给该物体加上一个缓冲运动。

 

如此，就不会有物体在目标点抖动的问题了。

 

总结：缓冲运动需要注意以下问题：

1.速度由距离决定；速度=（目标值-当前值）/缩放系数

2.速度必须取整；Math.ceil()  Math.floor()

3.目标值取整；（有0.5像素的误差可忽略）不是整数时会在目标位置附近抖动。

4.缓冲运动的停止条件;两点重合

转载于:https://www.cnblogs.com/allencxw/p/8975375.html