JS---运动（7）

7.运动扩展

一、主要知识点： 

弹性运动

用变量存储位置
       碰撞运动
       拖拽求速度

二，具体分析：

l 加减速运动
? 速度不断增加或减少
?速度减小到负值，会向反方向运动

 

<script>
var iSpeed=0; //一定要放在外面
function startMove()
{
 var oDiv=document.getElementById('div1');

 setInterval(function (){
  if(oDiv.offsetLeft<300)
  {
   iSpeed++;
  }
  else
  {
   iSpeed--;
  }

  oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
 }, 30);
} 

弹性运动
?在目标点左边，加速；在目标点右边，减速
?根据距离，计算加速度

<script>
var iSpeed=0;
function startMove()
{
 var oDiv=document.getElementById('div1');
 setInterval(function (){
  if(oDiv.offsetLeft<300)
  {
   iSpeed+=(300-oDiv.offsetLeft)/50;
  }
  else
  {
   iSpeed-=(oDiv.offsetLeft-300)/50;
  }
  oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
 }, 30);
}
</script> 


l摩擦力
?速度不断减小
l带摩擦力的弹性运动
?弹性运动+摩擦力
<script>
var iSpeed=0;
function startMove()
{
 var oDiv=document.getElementById('div1');
 
 setInterval(function (){
  iSpeed+=(300-oDiv.offsetLeft)/5;
  iSpeed*=0.7;
  
  oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
 }, 30);
}
</script> 


l弹性公式
?速度+=(目标值-oDiv.offsetLeft)/5
?速度*=0.7
l例子
?仿官网导航条效果
–无法到达指定位置——小数误差问题
–如何解决？速度无法取整，使用变态办法——变量

 

var iSpeed = 0;
var left = 0;
function startMove(obj,iTarget)
{
  var timer = null;
  clearInterval(obj.timer); 
  obj.timer = setInterval(function(){
  iSpeed = (iTarget-obj.offsetLeft)/5;
  iSpeed *= 0.75;
  left+=iSpeed;
  if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1)//位置和目标重合并且速度为0；
  {//这个时候的速度和left都是小数，所以。。。
     clearInterval(obj.timer); 
     obj.style.left = iTarget + 'px';  //left只能是一个整数，不能是小数，所以将一个变量left(可以是小数)和速度相加，速度都往变量上面加。
  } 
  else
  {
   obj.style.left = obj.offsetLeft + iSpeed + 'px';
  }   
   },30); 
};

?弹性菜单
–弹性运动的问题：运动过界--会出现有些属性为负数。

 ps:弹性运动不适用的地方：样式会过界的时候就不能使用弹性运动。

 
碰撞运动
撞到目标点，速度反转
无重力的漂浮Div
–速度反转
–滚动条闪烁的问题

<style>
#div1 {width:200px; height:200px; background:red; position:absolute;border-radius:100px;}//css3属性.
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var iSpeedX=6;
var iSpeedY=8; //怎么才能放到里面、
function startMove()
{
 setInterval(function (){
  var oDiv=document.getElementById('div1');
  var l=oDiv.offsetLeft+iSpeedX;
  var t=oDiv.offsetTop+iSpeedY;
  
  if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
  {
   iSpeedY*=-1;
   t=document.documentElement.clientHeight-oDiv.offsetHeight;
  }
  else if(t<=0)
  {
   iSpeedY*=-1;
   t=0;
  }
  
  if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
  {
   iSpeedX*=-1;
   l=document.documentElement.clientWidth-oDiv.offsetWidth;
  }
  else if(l<=0)
  {
   iSpeedX*=-1;
   l=0;
  }
  
  oDiv.style.left=l+'px';
  oDiv.style.top=t+'px';
 }, 30);
}
</script>
</head> 

过界后直接拉回来
加入重力
反转速度的同时，减小速度
纵向碰撞，横向速度也减小
横向速度小数问题（负数)

<script>
var iSpeedX=10;
var iSpeedY=8;
function startMove()
{
 setInterval(function (){
  var oDiv=document.getElementById('div1');
  
  iSpeedY+=3;   //重力
  
  var l=oDiv.offsetLeft+iSpeedX;
  var t=oDiv.offsetTop+iSpeedY;

  if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
  {
   iSpeedY*=-0.8;   //地边的时候速度慢慢减小
   iSpeedX*=0.8;    //横向速度需要减小，不改变方向
   t=document.documentElement.clientHeight-oDiv.offsetHeight;
  }
  else if(t<=0)
  {
   iSpeedY*=-1;
   iSpeedX*=0.8; //碰到上方墙的时候也需要x方向的速度减小
   t=0;
  }
  
  if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
  {
   iSpeedX*=-0.8;
   l=document.documentElement.clientWidth-oDiv.offsetWidth;
  }
  else if(l<=0)
  {
   iSpeedX*=-0.8;
   l=0;
  }

  if(Math.abs(iSpeedX)<1)//如果横向的速度已经很小了，就直接变为0，防止小数引发的问题。
  {
   iSpeedX=0;
  }
  //如果不设置，当ispeed<0的时候，会反向运动一段距离才开始停下来。
  if(Math.abs(iSpeedY)<1)
  {
   iSpeedY=0;
  }
  
  oDiv.style.left=l+'px';
  oDiv.style.top=t+'px';
  
  document.title=iSpeedX;
 }, 30);
}
</script> 

鼠标拖拽
两点间距离求出速度
运动终止条件
弹性运动：距离足够近 并且 速度足够小
碰撞运动：距离足够近 并且 速度足够小

window.οnlοad=function ()
{
 var oDiv=document.getElementById('div1');
 
 var lastX=0;
 var lastY=0;
 
 oDiv.οnmοusedοwn=function (ev)
 {
  var oEvent=ev||event;
  
  var disX=oEvent.clientX-oDiv.offsetLeft;
  var disY=oEvent.clientY-oDiv.offsetTop;
  
  document.οnmοusemοve=function (ev)
  {
   var oEvent=ev||event;
   
   var l=oEvent.clientX-disX;
   var t=oEvent.clientY-disY;
   
   oDiv.style.left=l+'px';
   oDiv.style.top=t+'px';
   
   iSpeedX=l-lastX;
   iSpeedY=t-lastY;
   
   lastX=l;
   lastY=t;
   
   document.title='x:'+iSpeedX+', y:'+iSpeedY;
  };
  
  document.οnmοuseup=function ()
  {
   document.οnmοusemοve=null;
   document.οnmοuseup=null;
   
   startMove();
  };
  
  clearInterval(timer);
 };
};
var timer=null;
var iSpeedX=0;
var iSpeedY=0;
function startMove()
{
 clearInterval(timer);
 
 timer=setInterval(function (){
  var oDiv=document.getElementById('div1');
  
  iSpeedY+=3;
  
  var l=oDiv.offsetLeft+iSpeedX;
  var t=oDiv.offsetTop+iSpeedY;
  
  if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
  {
   iSpeedY*=-0.8;
   iSpeedX*=0.8;
   t=document.documentElement.clientHeight-oDiv.offsetHeight;
  }
  else if(t<=0)
  {
   iSpeedY*=-1;
   iSpeedX*=0.8;
   t=0;
  }
  
  if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
  {
   iSpeedX*=-0.8;
   l=document.documentElement.clientWidth-oDiv.offsetWidth;
  }
  else if(l<=0)
  {
   iSpeedX*=-0.8;
   l=0;
  }
  
  if(Math.abs(iSpeedX)<1)
  {
   iSpeedX=0;
  }
  
  if(Math.abs(iSpeedY)<1)
  {
   iSpeedY=0;
  }
  
  if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight)
  {
   clearInterval(timer);
   alert('停止');
  }
  else
  {
   oDiv.style.left=l+'px';
   oDiv.style.top=t+'px';
  }
  
  document.title=iSpeedX;
 }, 30);
}