什么是匀速运动
我的理解是买一段时间内运动的位移相等(也可以百度一下啊).在JS中就是,有一个盒子每隔一段时间就移动一段位移.
如下图,我们如何实现呢(从图一到图2,做匀速运动)
匀速运动开始.png
匀速运动完成.png
第一步
当然是把基本结构搭建出来
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 100px;
height: 100px;
background: red;
margin: 50px 0 0 0;
}
.long-box{
width: 500px;
height: 20px;
background: #00a7f7;
}
.short-box{
width: 200px;
height: 20px;
background: #18D303;
margin: 10px 0px 0px 0;
}
</style>
</head>
<body>
<button id="Five">开始到500</button>
<button id="Two">开始到200</button>
<button id="Close">结束</button>
<div class="box"></div>
<div class="long-box"></div>
<div class="short-box"></div>
</body>
第二步
开始思考,我要怎么才能让box动起来,开始编写JS代码
先要拿到需要的元素并为按钮添加事件,然后只要控制box的marg-left就可以啦
//为按钮添加点击事件
oBtnF.onclick=function () {
//设置每一秒box移动的位移
let step=10;
//开始拿到oBox的marginLeft
let begin=oBox.style.marginLeft||0;/*一开始我们拿不到box的marginLeft*/
begin=begin+step;
console.log(begin);
//将改变后的值,在赋值给box的的marginLeft
oBox.style.marginLeft=begin+"px";
console.log(oBox.style.marginLeft);
}
这样我们就实现了,点击按钮之后.box就会向右移10px啦,但是我们需要box自己运动到500px停下来即
oBtnF.onclick=function () {
//防止多个定时器同时开始
clearInterval(timer);
//开启定时器
timer=setInterval(function () {
//设置每一秒box移动的位移
let step=10;
//设置终点大小
let target=500;
//开始拿到oBox的marginLeft
let begin=parseInt(oBox.style.marginLeft)||0;/*一开始我们拿不到box的marginLeft,oBox.style.marginLeft拿到的数据是有单位的*/
begin=begin+step;
console.log(target);
console.log(begin);
//判断是否已经到达终点
if(begin>=target){
clearInterval(timer);
}
//将改变后的值,在赋值给box的的marginLeft
oBox.style.marginLeft=begin+"px";
console.log(oBox.style.marginLeft);
},100)
}
但是如果step不能被500整除,那么以上的代码就不能实现了
解决方法是:将if的条件改一下
if(Math.abs(target-begin)<=step){
clearInterval(timer);
begin=target;
}
接下来只要完成回到200的代码啦,只要marginLeft的值减少到200就行啦
oBtnT.onclick=function () {
//防止多个定时器同时开始
clearInterval(timer);
//开启定时器
timer=setInterval(function () {
//设置每一秒box移动的位移
let step=-13;
//设置终点大小
let target=200;
//开始拿到oBox的marginLeft
let begin=parseInt(oBox.style.marginLeft)||0;/*一开始我们拿不到box的marginLeft,oBox.style.marginLeft拿到的数据是有单位的*/
begin=begin+step;
console.log(target);
console.log(begin);
//判断是否已经到达终点
if(Math.abs(target-begin)<=Math.abs(step)){
clearInterval(timer);
begin=target;
}
//将改变后的值,在赋值给box的的marginLeft
oBox.style.marginLeft=begin+"px";
console.log(oBox.style.marginLeft);
},100)
}
我们可以发现开始到500和回到200的代码非常相似,所以我们可以提取出来.作为一个方法.我们可以发现需要改变的只有重点位置和step
oBtnF.onclick=function () {
linearAnimation(500,oBox);
};
oBtnT.onclick=function () {
linearAnimation(200,oBox);
};
oBtnC.onclick=function () {
clearInterval(timer);
};
function linearAnimation(target,ele) {
//防止多个定时器同时开始
clearInterval(timer);
//开启定时器
timer=setInterval(function () {
//开始拿到oBox的marginLeft
let begin=parseInt(oBox.style.marginLeft)||0;/*一开始我们拿不到box的marginLeft,oBox.style.marginLeft拿到的数据是有单位的*/
//设置每一秒box移动的位移
// 0-500=-500 13
// 500-200=300 -13
let step=(begin-target)>0?-13:13;
begin=begin+step;
console.log(target);
console.log(begin);
//判断是否已经到达终点
if(Math.abs(target-begin)<=step){
clearInterval(timer);
begin=target;
}
//将改变后的值,在赋值给box的的marginLeft
ele.style.marginLeft=begin+"px";
console.log(oBox.style.marginLeft);
},100)
}
这个代码完成
