/* 动画原理
1. 获得盒子当前的位置
2. 让盒子在当前位置加上1个移动距离
3. 利用定时器不断重复这个操作
4. 加一个结束定时器的条件
5. 注意此元素需要添加定位,才能使用element.style.left
*/
// 获取元素
var div = document.querySelector('div');
// div.offsetLeft+1 offsetLeft只能获取不能赋值
// 改变值 必须通过style来赋值
// div.style.left = div.offsetLeft + 10 + 'px';
// 使用定时器
var time = setInterval(()=>{
if(div.offsetLeft >= 400){
// 大与等于400停止定时器
clearInterval(time)
}
div.style.left = div.offsetLeft + 1 + 'px';
},30);
div {
position: absolute;
left: 0;
width: 200px;
height: 200px;
background-color: red;
}
<div></div>
封装动画函数
<body>
<div></div>
<script>
/*函数封装
函数需要传递2个参数,动画对象和移动到的距离
obj目标对象 target目标位置
*/
function animate(obj,target){
var time = setInterval(()=>{
if(obj.offsetLeft >= target){
clearInterval(time)
}
obj.style.left = obj.offsetLeft + 1 + 'px';
},30);
}
var div = document.querySelector('div');
// 调用函数
animate(div,400);
</script>
</body>
给不同的元素记录不同的定时器
<style>
div {
position: absolute;
left: 0;
width: 200px;
height: 200px;
background-color: red;
}
span {
position: absolute;
bottom: 200px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<span>下</span>
<button>下走</button>
function animate(obj,target){
// 先把原先的定时器清除,清除完之后再开始一个新的
clearInterval(obj.time);
/* 不使用var time两个好处第一个 1.避免var声明变量不在内存中开辟空间
2.每个元素都有自己专门的定时器*/
obj.time = setInterval(()=>{
if(obj.offsetLeft >= target){
// time改成obj.time
clearInterval(obj.time)
}
obj.style.left = obj.offsetLeft + 1 + 'px';
},30);
}
var div = document.querySelector('div');
var span = document.querySelector('span');
var btn = document.querySelector('button')
// 调用函数
animate(div,400);
// 有bug点击按钮越来越快
// 解决方案让我们元素只有一个定时器执行
btn.addEventListener('click',() => {
animate(span,200);
})
image.png
网友评论