各种运动原理

一：运动的原理

1·1：原理

JS实现运动的原理，就是通过定时器不断改变元素的位置，直至到达目标点后停止运动。通常，要让元素动起来，我们会通过改变元素的 left 和 top 值来改变元素的相对位置。

1·2：方法

• 运动的元素必须开启绝对定位
• 通过改变定位元素的属性来使物体进行移动

1·3：步骤

• 开始运动前，先清除已有的定时器

  （连读的点击，物体会运动越来越快,造成运动混乱）

• 开启定时器，计算速度

• 把运动和停止隔开（if/else),判断停止条件

• 执行运动

---

二·匀速运动

<button id="btn1" onclick="startMove()">开始</button>
//盒子必须开启绝对定位
 <div id="box"></div>

//定义一个定时器
 let time = null;
 function startMove(){
    // 每次启动定时器时,将上一个定时器清除
   clearInterval(time);
    time = setInterval(function(){
     box.style.left = box.offsetLeft + 5 + "px";
       if(box.offsetLeft > 300){ 
        box.style.left = "300px";//注意边界问题
           //达到边界时候清除定时器
         clearInterval(time);}
     },50);
 }

三：往返运动

<button type="button"><---</button>
<button type="button">---></button>
<div id="box"></div>

let time = null;
function startMove(obj,target){
	clearInterval(time);
	time = setInterval(function(){
	let speed = obj.offsetLeft >= target ? -5:5;
	obj.style.left = obj.offsetLeft + speed + "px";
	if(obj.offsetLeft == 0 || obj.offsetLeft == 1000){
		clearInterval(time);}
	},50);
}
oBtns[0].onclick = function(){
	startMove(oBox,0);
}
oBtns[1].onclick = function(){
	startMove(oBox,1000);
}

四：匀速透明运动

<div id="box" onmouseover="startMove(1)"onmouseout="startMove(0.1)"></div>
	
let time = null;
function startMove(target) {
 clearInterval(time);
 time = setInterval(function() {
   //获取非行内样式只能使用getComputedStyle
 let speed = getComputedStyle(oBox,false)["opacity"] <=  target ? 0.01 : -0.01;
   //getComputedStyle获取的是字符串
 oBox.style.opacity = Number(getComputedStyle(oBox,false) ["opacity"]) + speed;
		}, 50);
}

五：缓冲运动

let oBox = document.querySelector("#box");
let oBtn = document.querySelector("button");
let time = null;
	
function startMove(obj,target){
clearInterval(time);
time = setInterval(function(){
let speed = (target-obj.offsetLeft)/10;
//取整  //核心算法
speed = speed>0 ? Math.ceil(speed) :Math.floor(speed);
   obj.style.left = obj.offsetLeft + speed + "px";
	if(obj.offsetLeft == 500){
	clearInterval(time);}
},50);
}
oBtn.onclick = function(){
  startMove(oBox,500);
}

六：反弹运动

var box = document.getElementById("box");
var time = null;
var speedX = 5;
var speedY = 5;
  function startMove(){
     clearInterval(time);
      time = setInterval(function(){
       box.style.left = box.offsetLeft + speedX + "px";
       box.style.top = box.offsetTop + speedY + "px";
         //判断反弹运动的条件
        if(box.offsetLeft<0){
            speedX *= -1;
         }    
        var maxX = window.innerWidth-box.offsetWidth;
        if(box.offsetLeft>maxX){
           speedX *= -1;
         }
         if(box.offsetTop<0){
            speedY *= -1;
          }
      var maxY = window.innerHeight-box.offsetHeight;
       if(box.offsetTop>maxY){
      speedY *= -1; }
  },50);
 }

七：圆周运动

必须已知大圆r以及角度,否则没法玩

<div id="ball"></div>
 let r = 200;
    //角度
 let deg = 90;
 let time = null;
 let ball = document.getElementById("ball");
   //圆心坐标
 let circleCenter = {
  x:ball.offsetLeft + ball.offsetWidth/2,
  y:r+ball.offsetHeight+ball.offsetTop}
  time = setInterval(function(){
      ball.style.left = circleCenter.x + r*Math.cos(deg*Math.PI/180) + "px";
  	  ball.style.top = circleCenter.y -r*Math.sin(deg*Math.PI/180) + "px";
     deg--;
 },30);
 style.left = circleCenter.x + r*Math.cos(deg*Math.PI/180) + "px";
  	  ball.style.top = circleCenter.y -r*Math.sin(deg*Math.PI/180) + "px";
     deg--;
 },30);