动画函数封装
动画实现原理
核心原理:通过定时器 setInterval() 不断移动盒子位置。
实现步骤:
- 获得盒子当前位置
- 让盒子在当前位置加上1个移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 注意此元素需要添加定位,才能使用element.style.left
动画函数给不同元素记录不同定时器
如果多个元素都使用这个动画函数,每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器(自己专门用自己的定时器)。
核心原理:利用 JS 是一门动态语言,可以很方便的给当前对象添加属性。
function animate(obj, target) {
// 当我们不断的点击按钮,这个元素的速度会越来越快,因为开启了太多的定时器
// 解决方案就是 让我们元素只有一个定时器执行
// 先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if (obj.offsetLeft >= target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30);
}
效果展示
源代码
<!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>
<style>
.box {
display: none;
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
.bBox {
position: absolute;
top: 180px;
left: 0;
width: 200px;
height: 200px;
background-color: plum;
}
</style>
</head>
<body>
<button class="btn500">点击500</button>
<button class="btn800">点击800</button>
<div class="box"></div>
<div class="bBox"></div>
<script>
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var x = (target - obj.offsetLeft) / 10;
x = x > 0 ? Math.ceil(x) : Math.floor(x);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
if (callback) {
callback();
}
}
obj.style.left = obj.offsetLeft + x + 'px';
}, 15)
};
var bBox = document.querySelector('.bBox');
var btn500 = document.querySelector('.btn500');
var btn800 = document.querySelector('.btn800');
btn500.addEventListener('click', function () {
animate(bBox, 500);
})
btn800.addEventListener('click', function () {
animate(bBox, 800, function () {
bBox.style.backgroundColor = 'pink';
// console.log(bBox.style.backgroundColor);
});
})
</script>
</body>
</html>