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

时间  2020-09-05 标签 javascript 入门 跑路 学习 笔记 运动 框架 匀速运动 缓冲 物体 链式

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

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

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

       关注我，咱们一块儿学习进步。java

运动框架能够相似于动画效果，让咱们的元素动起来，而后视频上的学习是大体从 匀速运动、缓冲运动、多物体运动、链式运动等。web

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

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

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

中止定时器的两种方法：clearTimeout(中止的定时器) 与 clearInterval(中止的定时器)函数

一、匀速运动

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

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

<!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 ）--------鼠标类事件

二、缓冲运动

当要即将到达终点的时候，速度会逐渐逐渐变慢，并最终变为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>

执行结果：
在这里插入图片描述

三、多物体运动

多物体运动呢，能够理解为有多个盒子，都有本身的运动。

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

<!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>

执行结果：
在这里插入图片描述

四、链式运动

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

咱们一样以盒子运动为例：

<!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 学习资料 一份 ，咱们一块儿学习进步吧。
在这里插入图片描述

联系我们 沪ICP备13005482号-10