javaScript交互补充2（动画函数封装）
2.1、简单动画实现
核心原理：通过定时器setInterval()不断移动盒子位置
实现步骤：
-
- 获得盒子当前位置、
- 让盒子在当前位置上加上1个移动距离、
- 利用定时器不断重复这个操作、
- 加一个结束定时器的条件
- 需要给元素加定位，利用left值变化改变元素的位置
<!-- 需求：小盒子从左向右移动，移动到500px的地方，停下 -->
<script>
var box = document.querySelector("div");
var timer = setInterval(function () {
if (box.offsetLeft === 500) {
clearInterval(timer);
return;
}
box.style.left = box.offsetLeft + 10 + "px";
}, 30);
</script>2.2、简单动画函数封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>02.封装简单动画函数</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background-color: #bfa;
position: relative;
left: 0;
}
span {
background-color: pink;
position: relative;
left: 0;
}
</style>
</head>
<body>
<div>动画1</div>
<span>动画2</span>
<!-- 封装函数，传入不同的对象，目标停止值，都可以调用动画 -->
<script>
function animation(obj, target) {
var timer = setInterval(function () {
if (obj.offsetLeft === target) {
clearInterval(timer);
return;
}
obj.style.left = obj.offsetLeft + 10 + "px";
}, 30);
}
var box = document.querySelector("div");
var s1 = document.querySelector("span");
animation(box, 500);
animation(s1, 300);
</script>
</body>
</html>
2.3、优化动画函数
动画函数给不同的元素记录不同定时器
如果多个元素都使用这个动画函数，每次都要var 声明定时器，我们可以给不同元素使用不同的定时器（自己用自己的定时器）
核心原理：利用js是一门动态语言，可以很方便的给当前对象添加属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>03.优化动画函数</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 100px;
height: 100px;
background-color: #bfa;
position: relative;
left: 0;
}
span {
background-color: pink;
position: relative;
left: 0;
}
</style>
</head>
<body>
<div>动画1</div>
<br />
<button>点击按钮，执行动画函数</button><br />
<span>动画2</span>
<!-- 优化1:根据传入的不同对象，将timer作为属性添加给不同的对象，减少开辟的空间 -->
<!-- 优化2:保证只有一个定时器在执行 -->
<script>
function animation(obj, target) {
//在开启动画前，先关闭前一个定时器，保证只有一个定时器在执行
clearInterval(obj.timer);
obj.timer = setInterval(function () {
if (obj.offsetLeft >= target) {
clearInterval(obj.timer);
//优化3:当达到目标值后，再点击也不会执行了
return;
}
obj.style.left = obj.offsetLeft + 10 + "px";
}, 30);
}
var box = document.querySelector("div");
var s1 = document.querySelector("span");
var btn = document.querySelector("button");
btn.addEventListener("click", function () {
animation(s1, 300);
});
animation(box, 500);
</script>
</body>
</html>
2.4、缓动效果原理
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：
让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
核心算法：（目标值-现在的位置）/10 作为每次移动的距离步长
停止的条件是：让当前盒子位置等于目标位置就停止定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>04.缓动画实现</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 100px;
height: 100px;
background-color: pink;
position: relative;
left: 0;
}
</style>
</head>
<body>
<button>点击按钮，执行动画函数</button><br />
<div>动画2</div>
<script>
function animation(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 定义step，来代表每次移动的距离值，（目标值-现在的位置）/10
var step = (target - obj.offsetLeft) / 10;
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
return;
}
obj.style.left = obj.offsetLeft + step + "px";
}, 30);
}
var s1 = document.querySelector("div");
var btn = document.querySelector("button");
btn.addEventListener("click", function () {
animation(s1, 500);
});
</script>
</body>
</html>
2.5、动画函数优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>05.优化缓动动画动画函数</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
}
</style>
</head>
<body>
<button id="btn01">点击按钮，执行动画函数 500</button><br />
<button id="btn02">点击按钮，执行动画函数 800</button><br />
<div>丹洋其</div>
<script>
//优化三 加回调函数，可以在执行动画后，再执行其他内容
function animation(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 定义step，来代表每次移动的距离值
// 优化一：对于step会涉及到小数，将小数向上取整
// var step = Math.ceil((target - obj.offsetLeft) / 10);
// 优化二：动画还是会涉及到往回走，如果往回走，则step会是负值，要向小取整
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
// 如果传入了回调，则执行回调，否则，就不执行
if (callback) {
callback();
}
} else {
// console.log(222);
obj.style.left = obj.offsetLeft + step + "px";
}
}, 15);
}
var s1 = document.querySelector("div");
var btn01 = document.querySelector("#btn01");
var btn02 = document.querySelector("#btn02");
btn01.addEventListener("click", function () {
animation(s1, 500);
});
btn02.addEventListener("click", function () {
animation(s1, 800, function () {
alert("111");
});
});
</script>
</body>
</html>
2.6、animation.js文件并使用
animation.js
function animation(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
if (callback) {
callback();
}
} else {
console.log(222);
obj.style.left = obj.offsetLeft + step + "px";
}
}, 15);
}简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.nav {
width: 30px;
height: 30px;
background-color: blueviolet;
position: fixed;
text-align: center;
line-height: 30px;
right: 0px;
top: 40%;
}
.con {
position: absolute;
left: 0px;
top: 0;
width: 200px;
height: 30px;
background-color: blueviolet;
z-index: -1;
}
</style>
<script src="./animation.js"></script>
</head>
<body>
<div class="nav">
<span>⬅️</span>
<div class="con">移入弹出</div>
</div>
<script>
var s1 = document.querySelector("span");
var nav = document.querySelector(".nav");
var con = document.querySelector(".con");
nav.addEventListener("mouseenter", function () {
animation(con, -170, function () {
s1.innerHTML = "➡️";
});
});
nav.addEventListener("mouseleave", function () {
animation(con, 0, function () {
s1.innerHTML = "⬅️";
});
});
</script>
</body>
</html>
原文地址：https://blog.csdn.net/qq_60060362/article/details/143801451
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！