本文详细介绍如何使用 JavaScript 实现缓动动画。核心思路是利用 setInterval 定时移动元素，通过公式 (target - offsetLeft) / 20 计算步长以控制速度。代码封装支持多元素复用，并在动画结束前清除旧定时器以防叠加，同时支持传入回调函数处理后续逻辑。
本文分享了一段使用 JavaScript 实现缓动动画的具体代码示例，供读者参考学习。
实现思路
1. 核心机制依赖于 setInterval 定时函数。 2. 目标元素需设置为绝对定位（absolute）并指定偏移量，其父容器必须设置为相对定位（relative）以确立定位基准。 3. 若需对多个元素执行动画，建议将动画逻辑封装为独立函数以提高复用性。 4. 元素通过调用定时函数进行位移，定时器内部需计算每次移动的步长。 计算公式为：var step = (target - obj.offsetLeft) / 20; 其中，obj 代表被动画操作的元素对象，target 为目标位置的左偏移量，数值 20 用于控制动画速度：分母越大，动画越慢；分母越小，动画越快。 5. 定时函数支持接收回调函数参数，若提供该参数，则在动画执行完毕后调用回调。 6. 在定时器执行逻辑的最前端，必须添加 clearInterval(obj.timer) 以清除之前的定时器。若不执行此操作，连续触发动画会导致效果叠加混乱；清除旧定时器可确保每次触发动画时状态独立。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aninamate动画</title>
<style>
* {
margin: 0;
padding: 0;
}
.content {
width: 1000px;
margin: 0 auto;
}
button {
padding: 5px;
margin: 60px 10px;
border: 1px solid #666;
outline-color: palevioletred;
}
.both {
background-color: pink;
color: #fff;
background-color: palevioletred;
}
.box {
position: relative;
height: 210px;
margin: 0px auto;
background-color: #191b28;
}
.yutu {
position: absolute;
top: 0;
left: 0;
width: 180px;
height: 210px;
}
.qiaojingjing {
position: absolute;
top: 0;
left: 820px;
width: 180px;
height: 210px;
}
.word1 {
display: none;
position: absolute;
top: -50px;
left: 45%;
}
.word2 {
display: none;
position: absolute;
top: -30px;
left: 50%;
}
</style>
</head>
<body>
<div class="content">
<button class="btn1">于途前进</button>
<button class="btn2">乔晶晶前进</button>
<button class="both">双向奔赴</button>
<button class="btn3">于途后退</button>
<button class="btn4">乔晶晶后退</button>
<div class="box">
<img src="images/于途.png" alt="" class="yutu">
<img src="images/乔晶晶.png" alt="" class="qiaojingjing">
<span class="word1">余生请多指教！</span>
<span class="word2">余生请多指教！</span>
</div>
</div>
<script>
var btn1 = document.querySelector('.btn1');
var btn2 = document.querySelector('.btn2');
var btn3 = document.querySelector('.btn3');
var btn4 = document.querySelector('.btn4');
var both = document.querySelector('.both');
var yutu = document.querySelector('.yutu');
var qiaojingjing = document.querySelector('.qiaojingjing');
var word1 = document.querySelector('.word1');
var word2 = document.querySelector('.word2');
btn1.addEventListener('click', function() {
animate(yutu, 340, function() {
word1.style.display = 'block';
});
});
btn2.addEventListener('click', function() {
animate(qiaojingjing, 520, function() {
word2.style.display = 'block';
});
});
btn3.addEventListener('click', function() {
animate(yutu, 0, function() {
word1.style.display = 'none';
});
});
btn4.addEventListener('click', function() {
animate(qiaojingjing, 820, function() {
word2.style.display = 'none';
});
});
both.addEventListener('click', function() {
animate(yutu, 340);
animate(qiaojingjing, 520);
word1.style.display = 'block';
word2.style.display = 'block';
});
// 动画函数 obj动画对象, target目标左偏移量, callback回调函数
function animate(obj, target, callback) {
// 清除之前的动画
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 计算出每次移动距离
var step = (target - obj.offsetLeft) / 20;
// 步数取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style.left = obj.offsetLeft + step + 'px';
if (obj.offsetLeft == target) {
// 停止动画
clearInterval(obj.timer);
// 如果有回调函数，执行回调函数
if (callback) {
callback();
}
}
}, 30);
}
</script>
</body>
</html>动画效果演示如下：
以上内容为本文的全部分享，希望能为读者的学习提供有益帮助，欢迎继续支持本站。