《js动画效果》之速度动画

最新推荐文章于 2023-07-06 21:45:43 发布

MMRS

最新推荐文章于 2023-07-06 21:45:43 发布

阅读量1.4k

点赞数 2

分类专栏：深入js 文章标签： js

本文链接：https://blog.csdn.net/mmrsdym/article/details/39989105

版权

深入js 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

学习视屏来自慕课网《js动画效果》：http://www.imooc.com/learn/167（这里话唠几句，慕课网上目前已有许多前端学习视屏，老师们将自己的研究进行分享，讲解生动，知识点+技术分析+典型例子的练习，非常适合我这种想要进一步提高前端各方面知识和技术且找不到例子练习的人。这里我不是在给慕课网做宣传或怎么样，慕课网视屏是免费的，且视屏内容真心不错，我作为其受益人当然要大力支持慕课网呀！）。下面进入正题，根据老师的讲解及板书，我将重要的知识及关键点归纳如下，以便参考。

js动画效果的类型：

1. 速度(匀速情况下)：改变值left、right、width、height、opacity

2. 缓冲运动（非匀速运动）

3. 多物体运动

4. 任意值变化（任意改变宽，高等）

5. 链式运动（eg: 先变宽，后变高）

6. 同时运动（eg: 宽高同时变）

1.1 简单动画——速度动画

*** 例子：鼠标划上“分享“按钮区域，面板从浏览器左侧滑出显示完整个面板；鼠标滑出整个面板，面板滑进浏览器左侧边界且全部隐藏，只留出”分享“区域。

*** demo图示：

图示-1 鼠标滑出时或初始状态

图示-2 鼠标划上

*** 分析

此例可作为”匀速运动“的典型例子，其通过改变物体的 left 值来实现运动，其实现的关键技术是采用定时器 setInterval(), 不过，在代码实现的过程中，会出现许多细节问题，根据老师的讲解，可以很容易的找出形成bug的原因及解决方法（除了技术的学习，老师的编码、分析问题、解决问题的能力也非常值得学习）。下面给出我练习的代码及相应注释：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
		*{
			padding:0;
			margin:0;
		}
		#box{
			width:200px;
			height:200px;
			background:red;
			position:relative;  /*物体初始必须要有此参数，否则不能实现物体的移动*/
			left:-200px;
			top:0;
		}
		#box span{
			width:20px;
			height:45px;
			background:green;
			position:absolute;
			left:200px;
			top:75px;
			color:#fff;
			text-align:center;
			padding-top:10px;
			cursor:pointer;
		}
		</style>
		<script type="text/javascript">
		window.onload = function(){
			var divEle = document.getElementById("box");
			divEle.onmouseover = function(){
				//showBox();
				//playBox2(10,0);  采用传参，合并后的函数
				playBox3(0);  //更精简的函数
			};
			divEle.onmouseout = function(){
				//hideBox();
				//playBox2(-10,-200);  采用传参，合并后的函数
				playBox3(-200); //更精简的函数
			}

		}

		//定义定时器初始化为null
		var timer = null;


		//简化参数个数的函数
		function playBox3(target){
			//先清除之前的定时器,避免开多个定时器造成bug
			clearInterval(timer);
			var divEle = document.getElementById("box");
			var speed = 0;

			//简化传参个数，为移动速度赋值
			if(divEle.offsetLeft > target){
				speed = -10;
			}else{
				speed = 10;
			}

			timer = setInterval(function(){
				if(divEle.offsetLeft == target){ //面板全部移出/移入时，清空定时器，停止运动
					clearInterval(timer);
				}else{
					divEle.style.left = divEle.offsetLeft + speed +"px";
				}
				
			},50); //每个50ms物体匀速运动 speed + "px"
		}


		//鼠标划过和移除使用同一函数
		function playBox2(speed,target){  
			//先清除之前的定时器
			clearInterval(timer);
			var divEle = document.getElementById("box");
			timer = setInterval(function(){

				//限制动画移动的范围
				if(divEle.offsetLeft == target){
					clearInterval(timer);
				}else{
					divEle.style.left = divEle.offsetLeft + speed +"px";
				}
				
			},50);
		}

		//鼠标划上
		function showBox(){

			//先清除之前的定时器
			clearInterval(timer);
			var divEle = document.getElementById("box");
			timer = setInterval(function(){
				if(divEle.offsetLeft == 0){
					clearInterval(timer);
				}else{
					divEle.style.left = divEle.offsetLeft + 10 +"px";
				}
				
			},50);
		}

		//鼠标移出
		function hideBox(){
			//先清除之前的定时器
			clearInterval(timer);
			var divEle = document.getElementById("box");
			
			timer = setInterval(function(){
				if(divEle.offsetLeft == -200){
					clearInterval(timer);
				}else{
					divEle.style.left = divEle.offsetLeft - 10 +"px";
				}
				
			},50);
		}
		</script>
	</head>
	<body>
		<div id="box"><span id="share">分享</span></div>
	</body>
</html>

*** 小结：

1）明确分析出物体属于何种运动类型；

2）实现匀速运动的关键点是采用定时器 setInnterval();

3) 清空定时器 clearInterval() 的使用；

4）注意物体css需设置position，及left 、top，其是实现左、右、上、下运动必不可少的。