完美运动框架（原生js实现）

最新推荐文章于 2020-10-14 22:22:42 发布

～晨輝～

最新推荐文章于 2020-10-14 22:22:42 发布

阅读量469

点赞数

本文链接：https://blog.csdn.net/weixin_42632751/article/details/81353548

版权

//导入js文件，调用函数即可用
//这个运动框架,支持多物体多样式的链式运动,和多物体多样式的同时运动(做的是缓冲运动) 
function startMove(obj,json,fn){
	//1、下一个物体运动运动开始前清除定时器
	clearInterval(obj.timer);
	//2、让每一个运动的物体都单独拥有一个定时器 这样就能支持多物体同时运动了
	obj.timer = setInterval(function(){
		var currentValue = null;
		var speed = null;
		var isYes = true;
		for(var attr in json){
			//3、获取外部样式的当前值
			if (attr == 'opacity') {
				currentValue = parseInt((parseFloat(getStyle(obj,attr)))*100);
			}else{
				currentValue = parseInt(getStyle(obj,attr));
			}
			//4、设置缓冲运动速度
			speed = (json[attr] - currentValue) / 8;
			//5、处理速度，让它始终为一个整数,因为计算机支持的最小像素为1
			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
			//6、改变当前值
			currentValue+=speed;
			//7、判断所有属性是否达到目的值
			if (currentValue != json[attr]) {
				isYes = false;
			}
			if (attr == 'opacity') {
				obj.style['opacity'] = currentValue / 100;
				obj.style['filter'] = `alpha(opacity = currentValue)`;
			}else{
				obj.style[attr] = currentValue + 'px';
			}
		}
		//8、所有属性的值达到目的值了，关闭定时器
		if (isYes) {
			clearInterval(obj.timer);
			//9、判断是否有回调函数(此处的回调函数是做链式运动用的)
			if (fn) {
				fn.call(obj);
			}
		}
	},30);
}

//获取外部样式
function getStyle(obj,styleName){
	if (obj.currentStyle) {
		return obj.currentStyle[styleName];
	}else{
		return getComputedStyle(obj)[styleName];
	}
}

接下来测试一下这个完美运动框架：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="js/完美运动框架.js"></script>
	<style>
	div{
		width: 150px;
		height: 50px;
		background: #5bd5f7;
		margin:20px auto; 
	}
	p{
		width: 100px;
		height: 100px;
		background: orange;
		position: absolute;/* 要想让物体动，必须得加定位 */
	}
	b{display: block;
		width: 200px;
		height: 200px;
		background: pink;
		margin: 300px auto;
	}
	i{display: block;
		width: 200px;
		height: 200px;
		background: green;
		margin: 400px auto;
	}
	</style>
	<script>
		window.onload = function(){
			//1、给这四个div都能做变宽的运动(多物体运动)
			var oDivs = document.getElementsByTagName("div");
			for(var i = 0;i < oDivs.length;i++){
				oDivs[i].onmouseover = function(){
					startMove(this,{"width":400});
				}
				oDivs[i].onmouseout = function(){
					startMove(this,{"width":150});
				}
			}

			//2、缓冲运动(单物体的缓冲运动)
			var oP1 = document.querySelector(".p1");
			oP1.onclick = function(){
				startMove(this,{"left":600});
			}

			//3、链式运动
			var oB = document.querySelector("b");
			oB.onmouseover = function(){
				startMove(this,{"width":400},function(){startMove(this,{"height":700},function(){startMove(this,{"opacity":50})})});
			}
			oB.onmouseout = function(){
				startMove(this,{"width":200},function(){startMove(this,{"height":200},function(){startMove(this,{"opacity":100})})});
			}



			//4、多样式同时运动
			var oI = document.querySelector("i");
			oI.onmouseover = function(){
				startMove(this,{"width":800,"height":400,"opacity":50});
			}
			oI.onmouseout = function(){
				startMove(this,{"width":200,"height":200,"opacity":100});
			}

		}
	</script>
</head>
<body>
	<!-- 1、多物体运动 -->
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>

	<!-- 2、单物体的缓冲运动 -->
	<p class="p1">缓冲运动</p>

	<!-- 3、链式运动 -->
	<b>先变宽,再变高,最后变透明度</b>

	<!-- 4、多样式同时运动 -->
	<i>变宽变高变透明度同时进行</i>

</body>
</html>