缓冲运动应用:
例子:跟随页面滚动的缓冲侧边栏
遇到问题:一个元素的left加小数是没有意义,会转成整数,造成死循环
解决技巧:
1、speed速度越来越慢,直到speed成小数设置speed取整行为,left每次加一直到目标点
2、根据方向speed为正时成小数向上进行取整,直到left为300停止定时器,反之向下取整
3、距离越远速度越大、公式:速度=(目标值-当前值)/缩放系数
4、潜在问题目标值不是整数,解决: 速度取整,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缓冲减速运动</title>
<style>
*{margin:0;padding:0;}
#aa1 {position:absolute;left:500px;width:100px;height:100px;background:#F00;display:inline-block;}
#btn1 {position:absolute;top:120px;}
.line {position:absolute;left:300px;width:1px;height:500px;background:#000;}
</style>
</head>
<body>
<input type="button" value = "移动" id="btn1">
<div id="aa1"></div>
<div id="aa2"></div>
<div class='line'></div>
<script>
var oDiv = document.querySelector('#aa1');
var oBtn = document.querySelector('#btn1');
var timer=null;
oBtn.onclick=function(){
var speed=0;
clearInterval(timer);
timer = setInterval(function(){
//1、speed速度越来越慢,直到speed成小数取整,
speed =(300-oDiv.offsetLeft) / 8;
speed=speed<0?Math.floor(speed):Math.ceil(speed);
if(oDiv.offsetLeft == 300){
clearInterval(timer);
timer=null;
}
else {
oDiv.style.left = parseInt(oDiv.offsetLeft + speed) + 'px';
console.log( oDiv.style.left+', '+speed);
}
},20)
};
</script>
</body>
</html>