javascript从入门到跑路-----小文的js学习笔记（25）------运动框架----匀速运动、缓冲运动、多物体运动、链式运动

**
javascript从入门到跑路-----小文的js学习笔记（1）---------script、alert、document。write() 和 console.log 标签

javascript从入门到跑路-----小文的js学习笔记（2）--------- 语法构成、关键字和保留字、变量

javascript从入门到跑路-----小文的js学习笔记（3）---------javascript中的几种数据类型
…
…
javascript从入门到跑路-----小文的js学习笔记目录
**

关注我，我们一起学习进步。

运动框架可以类似于动画效果，让我们的元素动起来，然后视频上的学习是大致从匀速运动、缓冲运动、多物体运动、链式运动等。

在说这些之前，先来回忆以下定时器的用法（详细请看javascript从入门到跑路-----小文的js学习笔记（9）------定时器以及图片轮播示例）

定时器的两种创建语法：
语法1： setinterval(函数，亳秒)
语法2： function 函数名（）{
要执行的代码
}

setinterval(“函数名（）”，毫秒)

停止定时器的两种方法：clearTimeout(停止的定时器) 与 clearInterval(停止的定时器)

1、匀速运动

匀速运动，即朝着一个方向速度不变一直保持着相同的速度进行运动即匀速运动

那么我们写一个盒子来进行演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style>{margin: 0;padding: 0;}#box{width: 200px;height: 200px;background-color: #32CD32;position: absolute;left: 0;top: 0;}</style><body><div id="box"></div><script>var timer=null;function an(dom,target){clearInterval(timer);timer = setInterval(function(){if(dom.offsetLeft<target){var speed=10;}else{var speed = -10;}if(target==dom.offsetLeft){clearInterval(timer)}else{dom.style.left = dom.offsetLeft+speed+"px";}                 },25)                                               }var box = document.getElementById("box")box.onmouseover = function(){an(box,500)}box.onmouseout = function(){an(box,0)}</script></body>
</html>

执行结果： 当我们鼠标移入盒子，盒子会向右移动，移出盒子则会向左移动至初始位置。

这便是我们的匀速运动，这里加入了两个鼠标的移入和移出事件知识回顾javascript从入门到跑路-----小文的js学习笔记（15 — 2 ）--------鼠标类事件

2、缓冲运动

当要即将到达终点的时候，速度会逐渐逐渐变慢，并最终变为0.

简单示例：同样是以盒子为例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style>{margin: 0;padding: 0;}#box{width: 200px;height: 200px;background-color: #32CD32;position: absolute;left: 0;top: 0;}</style><body><div id="box"></div><script>var timer=null;function an(dom,target){clearInterval(timer);timer = setInterval(function(){var speed = (target-dom.offsetLeft)/20;if(speed>0){speed = Math.ceil(speed)}else{speed = Math.floor(speed)}if(target==dom.offsetLeft){clearInterval(timer)}else{dom.style.left = dom.offsetLeft+speed+"px";}                   },25)                                               }var box = document.getElementById("box")box.onmouseover = function(){an(box,500)}box.onmouseout = function(){an(box,0)}</script></body>
</html>

执行结果：

3、多物体运动

多物体运动呢，可以理解为有多个盒子，都有自己的运动。

同样以盒子为例：创建三个盒子，当我们鼠标移入盒子变长，移出盒子恢复原样。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>*{margin:0;padding:0}ul li{width:400px;height: 100px;background: greenyellow;margin-top:20px;}
</style>
<body><ul><li></li><li></li><li></li>
</ul><script>
function animate(dom,target){clearInterval(dom.timer);dom.timer = setInterval(function(){var speed= (target-dom.offsetWidth)/10;speed = speed>0 ?Math.ceil(speed):Math.floor(speed);if(target == dom.offsetLeft){//停止定时器clearInterval(dom.timer);}else{dom.style.width = dom.offsetWidth + speed +"px";}},30)}var lis =document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){lis[i].onmouseover = function(){animate(this,600);}lis[i].onmouseout = function(){animate(this,400);}
}</script>
</body>
</html>

执行结果：

4、链式运动

链式运动你可以理解为执行完一段操作后，进行下一段操作，只有当上一段操作执行完毕之后，才会执行下一段操作。

我们同样以盒子运动为例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>*{margin:0;padding:0}#box{width:100px;height: 100px;background: seagreen;position: absolute;left:0;top:0;opacity: 0.3;filter:alpha(opacity:30);}
</style>
<body><div id="box"></div><script src="script.js"></script>
<script>//dom指DOM节点  target 指目标值   attr 指属性名称   fn 指回调函数
function animate(dom,target,attr,fn){clearInterval(dom.timer);dom.timer = setInterval(function(){if(attr=="opacity"){var objAttr= parseFloat(getAttr(dom,attr))*100;}else{var objAttr = parseInt(getAttr(dom,attr));}var speed = (target-objAttr)/10;speed = speed>0 ?Math.ceil(speed):Math.floor(speed);if(target == objAttr){//停止定时器clearInterval(dom.timer);if(fn)fn();}else{if(attr=="opacity"){dom.style.filter = "alpha(opacity:"+objAttr + speed+")";dom.style[attr] = (objAttr + speed)/100;}else{dom.style[attr] = objAttr + speed +"px";}}},30)
}function getAttr(dom,attr){if(dom.currentStyle){return dom.currentStyle[attr];}else{        return getComputedStyle(dom,null)[attr];}
}var box =document.getElementById("box");box.onmouseover = function(){animate(box,700,"left",function(){animate(box,500,"top",function(){animate(box,0,"left",function(){animate(box,0,"top")})});});
}</script>
</body>
</html>

执行结果：这里你可以看出我们的这个盒子当向右移动到指定位置，即上一段动作向右移动完成结束，才开始下一段动作向下移，当完成向下移动再向左移，同样完成当作之后再向上移动，

**
关注校园君有话说公众号，回复 web前端免费领取50G 学习资料一份，我们一起学习进步吧。