原生JS的缓冲运动

最新推荐文章于 2022-09-26 13:42:34 发布

寒江独

最新推荐文章于 2022-09-26 13:42:34 发布

阅读量225

点赞数

本文链接：https://blog.csdn.net/fandyvon/article/details/88718934

版权

原生JS实现缓冲运动

原生JS实现缓冲运动

JS中的缓冲运动和摩擦运动很相似，只不过区别在于缓冲运动越接近目标点速度越慢，抵达目标点的时候速度为0，停止运动。其实现过程和摩擦运动相似，其区别在于，缓冲运动的初始速度为0，而且在运动过程中，缓冲速度一直是变化的，而且这个变化是受距离的减小影响的。越接近目标点，速度越低。速度=距离/时间，在这里的时间并不是一个真实的时间而是自己设定的一个系数。距离是等于预定的距离减去元素的 offsetLeft 实现过程如下：

 
   <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>缓冲运动</title>
<style>
#div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px;}
</style>
<script>
window.onload = function() {
	
	var oBtn = document.getElementById('btn');
	var oDiv = document.getElementById('div1');
	var iTimer = null;
	
	oBtn.onclick = function() {
		
		clearInterval(iTimer);
		var iSpeed = 0;
		
		iTimer = setInterval(function() {
			
			iSpeed = (500 - oDiv.offsetLeft) / 6;
			
			console.log( oDiv.offsetLeft + ' : ' + iSpeed );
			
			if (oDiv.offsetLeft == 500) {
				clearInterval(iTimer);
                               
			} else {
				oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
			}
			
		}, 30);
		
	}
	
}
</script>
</head>

<body>
	<input type="button" value="动起来" id="btn" />
    <div id="div1"></div>
</body>
</html>
 
  

在线操作

我们将距离设置为500，系数设置为6，那么就可以得到一个缓冲运动。但同时我们也发现了一个问题：元素运行到接近500的时候，而这个left并没有达到500，而是在498.333地方就停住了，这是为什么呢？我们可以通过“console.log( oDiv.offsetLeft + ‘ : ‘ + iSpeed );”这段代码，可以看出最后几项运动数据：当oDiv.offsetLeft的为492的时候，style.left的距离为493.3333333，这个时候那么oDiv.offsetLeft为493.因为在css解析和js解析中我们介绍过， js解析是不能有小数的，,是进行四舍五入的方法取值。但是当oDiv.offsetLeft运行到498的时候，这个时候style.left的值为498.3333333，在 oDiv.offsetLeft看来还是498，而不会再往前进一位。因此就停止在498.333的位置了。如果要想去掉这个小数，而且后面有小于1的速度，那么我们要采用向上取整的方法来将速度变为整数，这样在最后逐渐加1的方式达到500的目标点。对速度进行向上取整， iSpeed =Math.ceil(iSpeed) 因此最后的代码是：

 
   <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px;}
</style>
<script>
window.onload = function() {
	
	var oBtn = document.getElementById('btn');
	var oDiv = document.getElementById('div1');
	var iTimer = null;
	
	oBtn.onclick = function() {
		
		clearInterval(iTimer);
		var iSpeed = 0;
		
		iTimer = setInterval(function() {
			
			iSpeed = (500 - oDiv.offsetLeft) / 6;
			
			iSpeed = Math.ceil(iSpeed) 
			
			console.log( oDiv.offsetLeft + ' : ' + iSpeed );
			
			if (oDiv.offsetLeft == 500) {
                                alert(oDiv.offsetLeft)   //500
				clearInterval(iTimer);
			} else {
				oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
			}
			
		}, 30);
		
	}
	
}
</script>
</head>

<body>
	<input type="button" value="动起来" id="btn" />
    <div id="div1"></div>
</body>
</html>
 
  

在线操作

以上就是缓冲运动实现的原理及案例。其实并不复杂，主要是要理清其中的原理即可。

寒江独

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS的缓冲运动

原生JS实现缓冲运动原生JS实现缓冲运动JS中的缓冲运动和摩擦运动很相似，只不过区别在于缓冲运动越接近目标点速度越慢，抵达目标点的时候速度为0，停止运动。其实现过程和摩擦运动相似，其区别在于，缓冲运动的初始速度为0，而且在运动过程中，缓冲速度一直是变化的，而且这个变化是受距离的减小影响的。越接近目标点，速度越低。速度=距离/时间，在这里的时间并不是一个真实的时间而是自...
复制链接

扫一扫