js运动原理

运动基础

在js中，让一个元素动起来的最简单的方式，就是点击按钮，让元素移动。下面是一个简单的案例：(下面几个案例的的html和css都是采用这个为例)

<!DOCTYPE html>

<html lang="zh">

<head>

	<title></title>

	<style>

		#d1 {

			width: 100px;

			height: 100px;

			background-color: red;

			position: absolute;

			top:100px;

			left:200px;

		}

	</style>

</head>

<body>

	<button id="btn">点击移动</button>

	<div id="d1"></div>

</body>

</html>

当点击按钮之后，让一个元素动起来，并且当偏移量（元素到达页面左界的具体）达到500px时停止移动。

// 需求分析:点击按钮,让div动起来

	// 获取元素

	let oBtn = document.getElementById("btn");

	let oDiv = document.getElementById("d1");

	// 声明一个变量用来储存计时器

	let iTimer = null;

	// 点击按钮元素一直运动

	oBtn.onclick = function(){

		iTimer = setInterval(function(){

			// 点击按钮之后，让元素的位置在当前的基础上每次增加10px，

			//当移动距离达到500时停止运动

			if(oDiv.offsetLeft === 500){

				// 当元素的左偏移量(元素距离页面窗口左边的距离)===500px时,停止移动

				clearInterval(iTimer);

			}else{

				oDiv.style.left = oDiv.offsetLeft + 10 + "px";

			}

		},30);

	};

在上面的代码中，存在两个非常严重的问题

当多次点击按钮时，速度会越来越快
当每次移动的距离不能被500整除时，元素将不会停止。

我们先来解决第一个问题（第二个问题在运动的封装中进行详细讲解）：

为什么速度会越来越快？原因是每点击一次按钮，就会触发一次单击事件，计时器就会发生累加，导致元素的移动速度越来越快。

解决方法：在每次开始运动之前先清除一次定时器。

oBtn.onclick = function(){

		clearInterval(iTimer);

		iTimer = setInterval(function(){}

（只需要在计时器之前加一句清除计时器，其它代码与上面完全一样，不再进行重复）

总结：让一个元素动起来的基本流程是什么？下面做一个简单总结：

问题的：匀速运动的元素没有办法进行在不整除的情况下在临界点停止

（下一篇博客中的运动的封装会解决此问题）
上述代码中，整个过程大致分为三个步骤：
- 清除定时器，确保只有一个定时器在执行
- 开启定时器
- 开始运动。但必须判断停止条件。

（因内容较多，会分开多次进行。从浅到深，徐徐渐进）

巴特西

JS的运动1（从简单到复杂运动，从单一属性到多属性同时进行的运动过程分析）

js运动原理

运动基础

最新文章

热门文章