setInterval实现缓动运动【JavaScript】

最新推荐文章于 2025-06-12 22:27:53 发布

陆仟

最新推荐文章于 2025-06-12 22:27:53 发布

阅读量538

点赞数 8

分类专栏： Web前端开发文章标签： javascript

本文链接：https://blog.youkuaiyun.com/2302_77228054/article/details/142528485

版权

Web前端开发专栏收录该内容

32 篇文章

订阅专栏

这段代码实现了一个简单的缓动动画效果，当鼠标悬停在 #box 元素上时，元素会从左侧滑入可见区域；当鼠标移出时，元素又会滑出不可见区域。通过 setInterval 和动态计算速度，使得动画效果比较流畅。

实现效果：

代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>缓动运动示例</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			#box {
				width: 400px;
				height: 200px;
				background-color: greenyellow;
				position: relative;
				left: -400px;
			}

			#box span {
				position: absolute;
				width: 40px;
				height: 60px;
				color: #fff;
				background-color: #000;
				right: -40px;
				top: 50%;
				margin-top: -30px;
				line-height: 60px;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<span>展开</span>
		</div>
		<script type="text/javascript">
			window.onload = function() {
				var box = document.getElementById('box');
				var timer = null;
				box.onmouseover = function() {
					slowAnimation(this, 0);
				}
				box.onmouseout = function() {
					slowAnimation(this, -400);
				}

				function slowAnimation(obj, end) {
					clearInterval(timer);
					timer = setInterval(function() {
						// 使用obj而不是box
						var currentLeft = obj.offsetLeft;
						var speed = (end - currentLeft) / 20;

						// 确保speed取整
						speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
						console.log(currentLeft, speed)

						// 判断是否到达目标位置
						if (currentLeft === end) {
							clearInterval(timer);
							return;
						}

						obj.style.left = currentLeft + speed + 'px';
					}, 30);
				}
			}
		</script>
	</body>

</html>

部分代码解析：

1. 页面加载事件

window.onload = function() {

window.onload: 这个事件会在页面及其所有资源（如图像、样式表等）完全加载后执行设置的函数。这里的函数将初始化动画的事件处理和定时器。

2. 获取 DOM 元素和初始化变量

var box = document.getElementById('box');
var timer = null;

var box: 使用 document.getElementById 获取 ID 为 box 的元素并赋值给变量 box。
var timer: 初始化一个变量 timer，将用于存储 setInterval() 返回的定时器 ID，以便后续可以清除定时器，防止多个定时器同时运行。

3. 事件处理

box.onmouseover = function() {
	slowAnimation(this, 0);
}
box.onmouseout = function() {
	slowAnimation(this, -400);
}

onmouseover: 当鼠标悬停在 box 元素上时，调用 slowAnimation 函数，使 box 的 left 属性设置为 0，使其滑入可见区域。
onmouseout: 当鼠标移出 box 元素时，调用 slowAnimation 函数，使 box 的 left 属性设置为 -400，使其滑出可见区域。

4. 动画函数 `slowAnimation`

function slowAnimation(obj, end) {
	clearInterval(timer);
	timer = setInterval(function() {

function slowAnimation(obj, end): 定义一个名为 slowAnimation 的动画函数，接受两个参数：
- obj: 要应用动画的 DOM 对象。
- end: 动画结束时左偏移量的目标值。
clearInterval(timer);: 清除之前的定时器，确保在新的动画开始前不会有旧的动画影响效果。
timer = setInterval(function() { ... }, 30);: 开始一个新的定时器，每 30 毫秒执行一次内部的匿名函数，用于更新 box 的位置。

5. 计算当前偏移量与速度

var currentLeft = obj.offsetLeft;
var speed = (end - currentLeft) / 20;

var currentLeft = obj.offsetLeft;: 获取当前 box 元素的左偏移量。
var speed = (end - currentLeft) / 20;: 根据目标值 end 和当前值 currentLeft 计算移动的速度。这里采用了一个分母为 20 的公式来确保动画的平滑度。

6. 取整速度

speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
console.log(currentLeft, speed);

speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);: 根据 speed 的正负值选择相应的取整方式，以确保 left 的值在设置时总是整数，避免可能的浮点数造成的视觉抖动。
console.log(currentLeft, speed);: 打印当前的偏移量和速度，便于调试观察。

7. 判断到达目标位置

if (currentLeft === end) {
	clearInterval(timer);
	return;
}

if (currentLeft === end): 判断当前偏移量是否达到目标位置 end。如果到达，清除定时器以停止动画。
clearInterval(timer);: 停止定时器，避免动画继续进行。
return;: 退出当前函数，结束动画。

8. 更新位置

obj.style.left = currentLeft + speed + 'px';

obj.style.left = currentLeft + speed + 'px';: 更新 box 的左偏移量。每次调用定时器都会根据计算出的 speed 来调整元素的位置，从而产生动画效果。

拓展：CSS过渡效果

实现效果：

代码：

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="utf-8">
		<title>缓动运动示例</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			#box {
				width: 400px;
				height: 200px;
				background-color: skyblue;
				position: relative;
				left: -400px;
				transition: left 1s ease;
				/* 使用 CSS 过渡效果 */
			}

			#box span {
				position: absolute;
				width: 40px;
				height: 60px;
				color: #fff;
				background-color: #000;
				right: -40px;
				top: 50%;
				transform: translateY(-50%);
				line-height: 60px;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<span>展开</span>
		</div>

		<script type="text/javascript">
			window.onload = function() {
				var box = document.getElementById('box');

				box.onmouseover = function() {
					box.style.left = '0'; // 鼠标移入时展开
				}

				box.onmouseout = function() {
					box.style.left = '-400px'; // 鼠标移出时收缩
				}
			}
		</script>
	</body>

</html>