JavaScript动画实现原理与缓动动画封装详解
本文详解JavaScript实现动画的核心原理，包括利用定时器改变元素位置。重点讲解如何封装通用动画函数，解决多元素动画冲突，并深入解析缓动动画公式与回调函数的应用，最终通过侧边栏滑动案例展示完整实现过程。
前言
动画在日常生活中十分常见，CSS中已支持2D和3D等多种动画效果。本文将重点介绍如何使用JavaScript实现动画效果，若内容对您有帮助，欢迎点赞支持。
1.动画原理
实现动画的第一步是获取元素的当前坐标位置。
随后，在当前位置基础上增加一个固定的移动距离。
利用JavaScript定时器不断重复执行上述移动操作，从而形成连续动画。
必须设置一个结束条件，用于判断何时停止定时器，防止动画无限执行。
需要注意的是，目标元素必须设置定位属性（如absolute或fixed），才能通过element.style.left修改其位置。
<body>
<div>
</div>
<script>
var div = document.querySelector('div');
var timer = setInterval(function () {
if (div.offsetLeft >= 500) {
clearInterval(timer);
}
div.style.left = div.offsetLeft + 2 + 'px';
}, 30)
</script>
</body>动画实现的核心在于利用定时器持续更新元素位置。
2.动画函数的封装
<script>
// 简单动画函数封装
function animate(obj, rug) {
var timer = setInterval(function () {
if (obj.offsetLeft >= rug) {
clearInterval(timer);
}
obj.style.left = obj.offsetLeft + 2 + 'px';
}, 30)
}
var div = document.querySelector('div');
animate(div,300);
</script>为了复用动画逻辑，需将其封装为独立函数。该函数接收两个参数：obj代表执行动画的目标元素，rug代表目标移动距离。
3.给不同元素添加定时器
<body>
<div>
</div>
<button>点击走</button>
<script>
// 简单动画函数封装
// 给不同元素添加定时器
function animate(obj, rug) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
if (obj.offsetLeft >= rug) {
clearInterval(obj.timer);
} else {
obj.style.left = obj.offsetLeft + 2 + 'px';
}
}, 30)
}
var div = document.querySelector('div');
var but = document.querySelector('button');
but.addEventListener('click', function () {
animate(div, 200);
})
</script>通过为每个元素分配独立的定时器，可以实现多个元素同时执行动画且互不干扰的效果。
4.缓动动画原理
缓动动画的核心公式为：(目标值 - 当前位置) / 10，计算结果作为每次移动的距离，使动画速度随接近目标而变慢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button>点击</button>
<div></div>
<script>
function animate(obj, rug) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 步长值
var step = (rug - obj.offsetLeft) / 10;
if (obj.offsetLeft == rug) {
clearInterval(obj.timer);
} else {
obj.style.left = obj.offsetLeft + step + 'px';
}
}, 15)
}
var div = document.querySelector('div');
var but = document.querySelector('button');
but.addEventListener('click', function () {
animate(div, 500);
})
</script>
</body>
</html>
5.给动画添加回调函数
回调函数的原理是将一个函数作为参数传递给另一个函数。当主函数执行完毕后，再执行传入的回调函数。
例如，在动画执行完毕（如移动800px）后，触发弹窗显示“hello”，这种在动画结束后执行的函数即为回调函数。
6.动画函数的使用
以下案例演示如何实现侧边栏的滑动效果。
当鼠标滑过slider区域时，触发con元素向左侧滑动。
当鼠标离开slider区域时，触发con元素向右侧滑动复位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/animate.js"></script>
<style>
.silder {
margin-left: 1600px;
text-align: center;
position: relative;
line-height: 100px;
width: 100px;
height: 100px;
background-color: aqua;
}
span {}
.con {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 200px;
height: 100px;
background-color: rgb(132, 0, 255);
}
</style>
</head>
<body>
<div class="silder">
<span>←</span>
<div class="con">问题反馈</div>
</div>
<script>
var silder = document.querySelector('.silder');
var con = document.querySelector('.con');
var span = document.querySelector('span');
silder.addEventListener('mouseenter', function () {
animate(con, -200, function () {
span.innerHTML = '→';
});
})
silder.addEventListener('mouseleave', function () {
animate(con, 0, function () {
span.innerHTML = '←';
});
})
</script>
</body>
</html>
写在最后
至此，关于JavaScript动画原理及JS实现动画效果的教程介绍完毕。如需了解更多相关技术，请查阅本站往期文章或继续浏览后续内容，感谢大家的支持！
网页开发三者分工：HTML结构、CSS样式与JavaScript交互怎么协作
2026-11-05 12:51:22
JS解析URL参数时怎么处理中文乱码和特殊字符
2026-11-05 12:47:23
js-cookie 存储 JSON 对象：自动序列化与反序列化技巧
2026-11-05 12:36:26
marked.js 快速上手：安装与基础 Markdown 转 HTML 示例
2026-11-05 09:32:53
Phaser.js 与 PixiJS、Cocos Creator 的技术选型对比
2026-11-05 08:36:30