js缓冲运动

最新推荐文章于 2021-12-15 10:27:23 发布

weixin_30519071

最新推荐文章于 2021-12-15 10:27:23 发布

阅读量73

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/huaci/p/3843515.html

本文介绍了一种使用JavaScript实现的缓冲运动效果，通过调整速度来控制元素平滑移动到指定位置。文章提供了完整的代码示例，并解释了如何处理速度的小数问题以确保精确到达目标位置。

缓冲运动

现象：逐渐变慢，最后停止

原理：距离越远，速度越大

速度的计算方式：

1，速度由距离决定

2，速度＝（目标值-当前值）/缩放系数

说明：速度为正负数时，也决定了物体移动的方向

示例：div缓冲运动

Bug: 1,div向右运动时，无法到达指定位置解决：速度向上取整,Math.ceil()

2,div向左运动时，无法到达指定位置解决：速度向下取整，Math.floor()

原因：速度为小数时，造成的

总结：但凡做缓冲运动时，速度一定要取整速度为正，向上取整速度为负，向下取整

注意：此时不需要用if/else隔开，因为速度最后会变成0,停止下来的

html部分

<input type="button" value="开始移动"　id="btn1" onclick="moveStart();" />
<div id="div1"></div>
<div id="div2"></div>

<style>
#div1 { position:absolute; left:600px; width:100px; height:100px; background:red;}
#div2 { width:1px; height:200px; position:absolute; left:300px; background:black;}
</style>

js部分

<script>
var timer = null;
var speed;
function moveStart(){
	var oDiv = document.getElementById("div1");
	clearInterval(timer);
	timer = setInterval(function(){
		speed = (300 - oDiv.offsetLeft)/10;
		//speed = Math.ceil(speed);	//向上取整
		//speed = Math.floor(speed);	//向下取整
		speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
		
		oDiv.style.left = oDiv.offsetLeft + speed + "px";
		document.title = oDiv.offsetLeft + speed;		
	},30);
	
}
</script>

转载于:https://www.cnblogs.com/huaci/p/3843515.html