setInterval实现缓动运动【JavaScript】
这段代码实现了一个简单的缓动动画效果，当鼠标悬停在 #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>原文地址：https://blog.csdn.net/2302_77228054/article/details/142528485
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！