**
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 学习资料 一份 ，我们一起学习进步吧。
