JS运动基础

JS运动基础

运动基础

让Div动起来

速度——物体运动的快慢

运动中的Bug

不会停止

速度取某些值会无法停止

到达位置后再点击还会运动

重复点击速度加快

/*运动框架*/
var timer=null;			//用来获取定时器
function startMove()
		{
			var oDiv=document.getElementById('div1');
			var speed=2							//物体运动快慢
			clearInterval(timer);				//防止多次点击累加定时器,使运动变快
			timer=setInterval(function(){
				//if else判断防止物体运动完后再次点击按钮还会出现运动
				if(oDiv.offsetLeft>=300)		//防止运动无法停止
				{
					clearInterval(timer);		
				}
				else
				{
					oDiv.style.left=oDiv.offsetLeft+speed+'px';
				}
			},30);
		}

匀速运动

速度不变

运动框架及运用

运动框架

在开始运动是，关闭已有的定时器

把运动和停止隔开（if / else）

运动框架实例

例子1：“分享到”侧边栏

​ 通过目标点，计算速度值

var timer=null;

		window.onload=function(){
			var oDiv=document.getElementById('div1');
			
			oDiv.onmouseover=function(){
				startMove(0);
			};
			oDiv.onmouseout=function(){
				startMove(-150);
			};
		};
		
		function startMove(iTarget)
		{
			var oDiv=document.getElementById('div1');
			var speed=oDiv.offsetLeft>iTarget?-10:10;		//三元式判断速度大小和方向
			clearInterval(timer);
			timer=setInterval(function(){
				if(oDiv.offsetLeft==iTarget)
				{
					clearInterval(timer);
				}
				else
				{
					oDiv.style.left=oDiv.offsetLeft+speed+'px';
				}
			},30);
		}

例子2：淡入淡出的图片（现如今可以直接用CSS3的hover实现，这里只做参考）

​ 用变量存储透明度

var alpha=30		//初始透明度
		var timer=null;
		window.onload=function(){
			var oDiv=document.getElementById('div1');
			
			oDiv.onmouseover=function(){
				startMove(100);
			};
			oDiv.onmouseout=function(){
				startMove(30);
			};
		};
		
		function startMove(iTarget)
		{
			var oDiv=document.getElementById('div1');
			var speed=alpha>iTarget?-7:7;		//三元式判断速度大小和方向
			clearInterval(timer);
			timer=setInterval(function(){
				if(alpha==iTarget)
				{
					clearInterval(timer);
				}
				else
				{
					alpha+=speed;
					oDiv.style.opacity=alpha/100;		//设置透明度
				}
			},30);
		}

缓冲运动

缓冲运动

逐渐变慢，最后停止

距离越远速度越大

速度由距离决定

速度=（目标值-当前值）/缩放系数

function startMove(){
				var oDiv=document.getElementById('div1');
				setInterval(function(){
					var speed=(300-oDiv.offsetLeft)/10;		//速度可能会算出小数,因此需要取整
					//速度大于0则向上取整,速度小于零则向下取整,防止运动未到达指定位置
					speed=speed>0?Math.ceil(speed):Math.floor(speed);
					oDiv.style.left=oDiv.offsetLeft+speed+'px';
				},30);
			};

例子：缓冲菜单

Bug：速度取整

跟随页面滚动的缓冲侧边栏

​ 潜在问题：目标值不是整数时

			window.onscroll=window.onresize=function(){
				var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;	//兼容获取滚动距离
				var oDiv=document.getElementById('div1');
				
				//oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
				startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);
			};
			
			var timer=null;
			function startMove(iTarget)
			{
				var oDiv=document.getElementById('div1');
				
				clearInterval(timer);
				timer=setInterval(function(){
					var speed=(iTarget-oDiv.offsetTop)/4
					speed=speed>0?Math.ceil(speed):Math.floor(speed);
				
					if(oDiv.offsetTop==iTarget)
					{
						clearInterval(timer);
					}
					else
					{
						oDiv.style.top=oDiv.offsetTop+speed+'px';
					}
				},30);
			}

匀速运动的停止条件

运动终止条件

匀速运动：距离足够近

缓冲运动：两点重合

			var timer=null
			function startMove(iTarget)
			{
				var oDiv=document.getElementById('div1');
				clearInterval(timer);
				timer=setInterval(function(){
					var speed=0;
					oDiv.offsetLeft<iTarget?speed=7:speed=-7;
					
					if(Math.abs(iTarget-oDiv.offsetLeft)<=7)
					{
						//距离目标的距离小于7则判断到达,因为下次运动不足7px,此时离目标点可能还差一点
						clearInterval(timer);
						//直接让left等于目标点,正式到达
						oDiv.style.left=iTarget+'px';
					}
					else
					{
						oDiv.style.left=oDiv.offsetLeft+speed+'px';
					}
				},30);
			}