缓动动画如果不取整，为什么不能到达终点，而是距离终点有3.6px

最新推荐文章于 2024-09-27 15:27:45 发布

蒲公英1001

最新推荐文章于 2024-09-27 15:27:45 发布

阅读量347

点赞数

文章标签：动画 javascript 前端

本文链接：https://blog.csdn.net/wangyining070205/article/details/124650620

版权

今天在学习缓动动画，
(目标值 - 现在的位置) / 10
做为每次移动的距离步长;
在我练习的例子中，盒子初始位置距离左端100px，目标距离左端500px，
我起初以为，最终运动结果会无限接近终点，但是查看html代码，发现
在这里插入图片描述
最终盒子的位置是496.4px，这一点我起初很不理解，为什么会剩余3.6px呢？
后来经过测试，发现原来是offsetLeft的四舍五入引起的。下面是我的测试用例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>缓动动画</title>
		<style>
			div {
				position: absolute;
				left: 100px;
				top: 200px;
				width: 150px;
				height: 150px;
				background-color: #23C6D9;
			}
		</style>
	</head>
	<body>
		<button>点击</button>
		<div>缓动</div>
		<script>
			function animate(obj, target) {
				clearInterval(obj.timer);
				obj.timer = setInterval(function() {
					var step = (target - obj.offsetLeft) / 10; 
					console.log(obj.offsetLeft);  //输出offsetLeft值
					if (obj.offsetLeft == target) {
						clearInterval(obj.timer);
					}
					obj.style.left = obj.offsetLeft + step + 'px';
					console.log(obj.style.left);//输出style.left值
				}, 15);
			}
			var move = document.querySelector('div');
			var btn = document.querySelector('button');
			btn.addEventListener('click', function() {
				animate(move, 500);
			})
		</script>
	</body>
</html>

我在程序执行的过程中，输出每次的offsetLeft和style.left值，发现offsetLeft会进行四舍五入运算，这是输出结果：
在这里插入图片描述
带px的是style.left,纯数字的是offsetLeft。当程序运行到496时，问题出现了，
500-496=4，4*0.1=0.4，
496+0.4=496.4 四舍五入后又是496
如此反复不断循环，程序一直在运行，不停止。

所以改进后的步长如下：
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
在这里插入图片描述