原生JS实现摩擦运动效果

寒江独

于 2019-02-11 16:12:49 发布

阅读量582

点赞数

本文链接：https://blog.csdn.net/fandyvon/article/details/88718931

版权

【运动】JS中的摩擦运动

原生JS实现各种动画效果。

摩擦运动就是速度越来越慢，最后停止的运动形式。元素有个初始速度，在运动的过程中，速度越来越慢，最后停止。相当于有摩擦力一样，所以被称为摩擦运动。先要声明一个初始速度，然后通过减法或者乘以小数或者除以一个大于1的数，逐渐让速度降下来。实现过程：

 
   <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>摩擦运动</title>
<style>
	#div{width: 100px;height: 100px;background: red; position: absolute; left: 0px; top: 30px;}
</style>
<script type="text/javascript">
window.onload=function(){

	var oBtn=document.getElementById('btn');
	var oDiv=document.getElementById('div');
	var iTime=null;
	var iSpeed=50;

	oBtn.onclick=function(){

		clearInterval(iTime);

		iTime=setInterval(function(){
			
			//用减法，先往前运动再往回运动。因为之后值是负值
			iSpeed -= 2;
			
			if (oDiv.offsetLeft == 500) {
				clearInterval(iTime);
			} else {
				oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
			}

		},30);
	}
}
</script>
</head>
<body>
	<input type="button" id="btn" value="运动"/>
	<div id="div"></div>
</body>
</html>
 
  

images

在线操作

上述是用减法的形式让速度降下来，但是使用减法会让速度变为负数，因此元素先往前运动，运动一段距离又往回运动。使用乘法就不会有这样的问题了. 使用乘法，乘以一个小数或除以一个大于1的数。

 
   <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>摩擦运动</title>
<style>
	#div{width: 100px;height: 100px;background: red; position: absolute; left: 0px; top: 30px;}
</style>
<script type="text/javascript">
window.onload=function(){

	var oBtn=document.getElementById('btn');
	var oDiv=document.getElementById('div');
	var iTime=null;
	var iSpeed=50;

	oBtn.onclick=function(){

		clearInterval(iTime);

		iTime=setInterval(function(){

			//用乘法没有负值，不用担心往回运动
			iSpeed *= 0.9;
			
			if (oDiv.offsetLeft == 500) {
				clearInterval(iTime);
			} else {
				oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
			}

		},30);
	}
}
</script>
</head>
<body>
	<input type="button" id="btn" value="运动"/>
	<div id="div"></div>
</body>
</html>
 
  