共计 3831 个字符，预计需要花费 10 分钟才能阅读完成。
迟缓动画的原理
迟缓动画就是让元素的静止速度有所变动，最常见的迟缓动画就是让动画速度缓缓停下来
外围思路
- 让盒子每次挪动的间隔缓缓变小，速度就会缓缓变小
- 外围算法：（目标值 - 当初的地位）/10 作为每次挪动的间隔步长
- 进行的条件：让盒子以后的地位等于指标的地位，就进行定时器
- 留神步长值须要取整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
button {margin: 50px;}
img {
position: absolute;
display: block;
width: 200px;
height: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<button> 点击挪动至 800</button>
<button> 点击挪动至 0 </button>
<img src="./image/ 头像.jpg" alt="">
<script>
var bth = document.querySelectorAll('button');
var img = document.querySelector('img')
// obj：指标对象 target: 指标地位
function aniamte(obj, target) {
// 革除以前的定时器，只保留以后的计时器
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)
}
obj.style.left = obj.offsetLeft + step + "px"
}, 15);
}
// 进行调用
bth[0].addEventListener('click', function() {aniamte(img, 800)
})
bth[1].addEventListener('click', function() {aniamte(img, 0)
})
</script>
</body>
</html>
迟缓动画增加回调函数
外围思路：回调函数要增加到定时器完结的地位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
button {margin: 50px;}
img {
position: absolute;
display: block;
width: 200px;
height: 200px;
border-radius: 50%;
}
.photo {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<button> 点击挪动至 800</button>
<button> 点击挪动至 0 </button>
<img src="./image/ 头像.jpg" alt=""class="img">
<script>
var bth = document.querySelectorAll('button');
var img = document.querySelector('img')
// obj：指标对象 target: 指标地位
function aniamte(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);
}
// 进行调用
bth[0].addEventListener('click', function() {aniamte(img, 800, function() {img.className = 'img'})
})
bth[1].addEventListener('click', function() {aniamte(img, 0, function() {img.className = 'photo img'})
})
</script>
</body>
</html>
引进 animate 动画函数
animate.js 文件
var bth = document.querySelectorAll('button');
var img = document.querySelector('img')
// obj：指标对象 target: 指标地位
function aniamte(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);
}
// 进行调用
bth[0].addEventListener('click', function() {aniamte(img, 800, function() {img.className = 'img'})
})
bth[1].addEventListener('click', function() {aniamte(img, 0, function() {img.className = 'photo img'})
})主文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.sliderbar {
position: fixed;
right: 0;
bottom: 100px;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
color: #fff;
cursor: pointer;
}
.con {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 40px;
background-color: purple;
z-index: -1;
}
</style>
<script src="./animate.js"></script>
</head>
<body>
<div class="sliderbar">
<span> ← </span>
<div class="con"> 问题反馈 </div>
</div>
<script>
var sliderbar = document.querySelector('.sliderbar');
var con = document.querySelector('.con');
sliderbar.addEventListener('mouseenter', function() {aniamte(con, -160, function() {sliderbar.children[0].innerHTML = "→"
})
})
sliderbar.addEventListener('mouseleave', function() {aniamte(con, 0, function() {sliderbar.children[0].innerHTML = "←"
})
})
</script>
</body>
</html>
正文完
