JS完美运动框架详解——原理分析及demo

最新推荐文章于 2022-06-24 12:38:48 发布

波克比520

最新推荐文章于 2022-06-24 12:38:48 发布

阅读量1w

点赞数 9

分类专栏： javascript 文章标签： JS运动框架详解

本文链接：https://blog.csdn.net/u011175410/article/details/50351667

版权

1.运动原理

Js运动，本质来说，就是让 web 上 DOM 元素动起来。而想要 DOM 动起来，改变其自身的位置属性，比如高宽，左边距，上边距，透明度等。还有一个很重要的前提是，运动的物体必须是绝对定位。

window.onload = function(){  
    var oBtn = document.getElementById('btn');  
    oBtn.onclick = function(){  
        var oDiv = document.getElementById('div1');  
        //设置定时器  
        setInterval(function(){  
            //改变物体位置  
            oDiv.style.left = oDiv.offsetLeft + 10 + 'px';  
        },30)  
                                                                                                                                                                                                                                                                      
    }  
}

上述代码，点击btn之后，就能是物体向左运动。可是会一直向右动，不会停止。因此需要创立一个停止的条件。在条件符合的情况下，清楚定时器。其中对于目标点的判断，尤为重要。

window.onload = function(){  
    var oBtn = document.getElementById('btn');  
    oBtn.onclick = function(){  
        var oDiv = document.getElementById('div1');  
        //设置定时器  
        var timer = setInterval(function(){  
            //判断停止条件  
            if(oDiv.offsetLeft > 300){  
                clearInterval(timer);  
            }else{  
                //改变物体位置  
                oDiv.style.left = oDiv.offsetLeft + 10 + 'px';  
                document.title = oDiv.offsetLeft;  
            }  
        },30);                                                                                                                   
    }  
}

上述代码中，但物体的位置大于300的时候，将停止运动。但是上述代码还有个问题，就是连续点击按钮，物体会运动越来越快。因为每点击一次，就开了一个定时器，累加的定时器。造成运动混乱。

2，运动框架（滑入滑出，淡入淡出）

window.onload = function(){  
    var oBtn = document.getElementById('btn');  
    oBtn.onclick = function(){  
        startMove();  
    }  
}  
var timer = null;  
function startMove(){  
    var oDiv = document.getElementById('div1');  
    clearInterval(timer);  
    //设置定时器  
    timer = setInterval(function(){  
        //判断停止条件  
        if(oDiv.offsetLeft > 300){  
            clearInterval(timer);  
        }else{  
            //改变物体位置  
            oDiv.style.left = oDiv.offsetLeft + 10 + 'px';  
            document.title = oDiv.offsetLeft;  
        }  
    },30);  
}

此外，在改变物体位置的时候，那个 “10”则是更改的数量，其实也就是速度。如果更改速度，运动的快慢就能确定。因此，运动框架的原理，基本步骤为：

1.先清除定时器

2.开启定时器，计算速度

3.判断停止条件，执行运动

var timer = null;  
function startMove(){  
    var oDiv = document.getElementById('div1');  
    clearInterval(timer);  
        //计算速度  
    var iSpeed = 10;  
    //设置定时器  
    timer = setInterval(function(){  
        //判断停止条件  
        if(oDiv.offsetLeft > 300){  
            clearInterval(timer);  
        }else{  
            //改变物体位置  
            oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';  
            document.title = oDiv.offsetLeft;  
        }  
    },30);  
}

对于停止条件，写死在里面了，所以需分离出参数。下面是一个分享到的例子。主要是根据目标判断速度的正负。从而在鼠标滑入画出时候进行运动/恢复的效果。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS运动——分享到</title>
	<style>
	*{padding: 0; margin: 0;}
	#div1{ width: 150px; height: 200px; background: #ccc; position: absolute; left: -150px;}
	#div1 span{ width: 20px; height: 60px; line-height: 20px; background: #8E91FF; color: #fff; position: absolute; top: 70px; right: -20px;}
	</style>
	<script>
	// 方法一：传一个参数(iTarget)
	/*window.onload = function(){
		var oDiv = document.getElementById('div1');
		var timer = null;

		oDiv.onmouseover = function(){
			startMove(0);
		};

		oDiv.onmouseout = function(){
			startMove(-150);
		};

		function startMove(iTarget){
			var oDiv = document.getElementById('div1');
			
			clearInterval(timer);

			timer = setInterval(function(){
				var speed = 0;
				
				oDiv.offsetLeft > iTarget ? speed = -10 : speed = 10;

				if(oDiv.offsetLeft == iTarget){
					clearInterval(timer);
				}else{
					oDiv.style.left = oDiv.offsetLeft + speed + 'px';
				}
			},30);
		};
	};*/

	// 方法二：传两个参数(speed,iTarget)
	window.onload = function(){
		var oDiv = document.getElementById('div1');
		var timer = null;

		oDiv.onmouseover = function(){
			startMove(10,0);
		};

		oDiv.onmouseout = function(){
			startMove(-10,-150);
		};

		function startMove(speed,iTarget){
			var oDiv = document.getElementById('div1');
			clearInterval(timer);
			timer = setInterval(function(){
				// 判断oDiv距离左边的距离是否等于目标点
				if(oDiv.offsetLeft == iTarget){
					clearInterval(timer);
				}else{
					oDiv.style.left = oDiv.offsetLeft + speed + 'px';
				}
			},30);
		};
	};
	</script>
</head>
<body>
	<div id="div1"><span>分享到</span></div>
</body>
</html>

另外一个小例子，淡入淡出，即改变物体的透明度，由于没有像原生的位置属性那样的offsetLset. 需要一个