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)!