JavaScript——动画函数封装
核心原理：通过定时器setInterval()不断移动盒子位置。
实现步骤：
- 获得盒子当前位置
- 让盒子在当前位置加上1个移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 注意此元素需要添加定位，才能使用element.style.left
动画函数简单封装
<!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>Document</title>
</head>
<style>
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
span {
position: absolute;
left: 0;
width: 120px;
height: 120px;
top: 150px;
background-color: bisque;
}
</style>
<body>
<button>点击开始走</button>
<div></div>
<span></span>
<script>
//简单动画函数封装 obj目标对象 target目标位置
//给不同的元素指定了不同的定时器
function animate(obj, target) {
//当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
//解决方案就是让我们元素只有一个定时器执行
clearInterval(obj.timer);//先清除以前的定时器，只保留当前的一个定时器执行
obj.timer = setInterval(function () {
if (obj.offsetLeft >= target) {
//停止动画，本质是停止定时器
clearInterval(obj.timer)
}
obj.style.left = obj.offsetLeft + 5 + 'px';
}, 30)
}
var div = document.querySelector('div');
var span = document.querySelector('span');
var btn = document.querySelector('button');
//调用函数
animate(div, 300);
btn.addEventListener('click', function () {
animate(span, 200);
});
</script>
</body>
</html>注意函数需要传递2个参数，动画对象和移动到的距离。
缓动动画
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来。
思路：
- 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
- 核心算法：
（目标值-现在的位置）/10作为每次移动的距离步长。 - 停止的条件是：让当前盒子位置等于目标位置就停止计时器。
- 步长值需要取整
- 如果让动画函数在多个目标值之间移动，当我们点击按钮的时候，需要判断步长是正值还是负值，如果是正值，则步长往大了取整；如果是负值则步长往小了取整。
<!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>Document</title>
</head>
<style>
span {
position: absolute;
left: 0;
width: 120px;
height: 120px;
top: 150px;
background-color: bisque;
}
</style>
<body>
<button class="btn500">走500</button>
<button class="btn800">走800</button>
<span></span>
<script>
//简单动画函数封装 obj目标对象 target目标位置
//给不同的元素指定了不同的定时器
function animate(obj, target) {
//当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
//解决方案就是让我们元素只有一个定时器执行
clearInterval(obj.timer);//先清除以前的定时器，只保留当前的一个定时器执行
obj.timer = setInterval(function () {
//步长值写到定时器的里面
//把我们步长值改为整数，不要出现小数问题
//var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
//停止动画，本质是停止定时器,缓动动画停止的条件是让当前盒子位置等于目标位置就停止定时器
clearInterval(obj.timer)
}
//把每次加1这个步长改为一个慢慢变小的值 步长公式：（目标值-现在的位置/10）
obj.style.left = obj.offsetLeft + step + 'px';
}, 15)
}
var span = document.querySelector('span');
var btn500 = document.querySelector('.btn500');
var btn800 = document.querySelector('.btn800');
//调用函数
btn500.addEventListener('click', function () {
animate(span, 500);
});
btn800.addEventListener('click', function () {
animate(span, 800);
});
//匀速动画就是 盒子是当前的位置+固定值10
//缓动动画就是盒子当前的位置+变化的值（目标值-现在的位置）/10
</script>
</body>
</html>动画函数添加回调函数
回调函数原理：函数可以作为一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。
回调函数写到定时器结束里面。
<!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>Document</title>
</head>
<style>
span {
position: absolute;
left: 0;
width: 120px;
height: 120px;
top: 150px;
background-color: bisque;
}
</style>
<body>
<button class="btn500">走500</button>
<button class="btn800">走800</button>
<span></span>
<script>
function animate(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();
}
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 15)
}
var span = document.querySelector('span');
var btn500 = document.querySelector('.btn500');
var btn800 = document.querySelector('.btn800');
//调用函数
btn500.addEventListener('click', function () {
animate(span, 500);
});
btn800.addEventListener('click', function () {
animate(span, 800, function () {
// alert('你好吗？');
span.style.backgroundColor = 'red';
});
});
</script>
</body>
</html>动画函数封装到JS文件
因为以后经常使用这个动画函数，可以单独封装到一个js文件里面，使用的时候引用这个js文件即可。
JS文件(animate.js)
function animate(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();
}
}
obj.style.left = obj.offsetLeft + step + "px";
}, 15);
}引用示例
<!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>Document</title>
<script src="animate.js"></script>
</head>
<style>
.sliderbar {
position: fixed;
right: 0;
bottom: 100px;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
cursor: pointer;
color: #fff;
}
.con {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 40px;
background-color: purple;
z-index: -1;
}
</style>
<body>
<div class="sliderbar">
<span>←</span>
<div class="con">问题反馈</div>
</div>
<script>
//1.获取元素
var sliderbar = document.querySelector('.sliderbar');
var con = document.querySelector('.con');
sliderbar.addEventListener('mouseenter', function () {
animate(con, -160, function () {
//当我们动画执行完毕，就把←改为→
sliderbar.children[0].innerHTML = '→';
});
})
sliderbar.addEventListener('mouseleave', function () {
animate(con, 0, function () {
//当我们动画执行完毕，就把→改为←
sliderbar.children[0].innerHTML = '←';
});
})
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022 年 09 月，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录