Dom高級-運動

1：運動原理
通過連續不斷的改變物體的位置，而發生移動變化。
使用setInterval實現。
勻速運動：速度值一直保持不變。
多物體同時運動：將定時器綁設置爲對象的一個屬性。
注：物體每次運動都應該把之前的定時器清除掉。

//box爲絕對定位
var speedX = 2
 box.timer = setInterval(function(){
      box.style.left = box.offsetLeft + speedX +'px';

},80)

2：邊界處理
遇到邊界是應該停止掉還是反彈，方向相反。
改變物體運動方向：將物體的速度值取反。

//邊界屬性  瀏覽器視口寬高
//返回當前視口的高度（即瀏覽器窗口的高度）
console.log(document.documentElement.clientHeight)
console.log(document.documentElement.clientWidth)
// 網頁總高度     body默認有margin，記得重置
console.log(document.body.clientHeight)
console.log(document.body.clientWidth)

var speedX = 2
 box.timer = setInterval(function(){
      box.style.left = box.offsetLeft + speedX +'px';
     //左右邊界
     if(box.offsetLeft <=0 || box.offsetLeft >= cWidth - box.offsetWidth){
          speedX = -speedX;
     } 
},80)

3：加速減速
加速：速度越來越快。
減速：速度越來越慢。

box.timer = setInterval(function() {
     speedX = speedX + 2;
     div.style.left = div.offsetLeft + speedX + 'px';

}, 50);

4：拋物線
水平方向有一速度，垂直方向有一速度，並做自由落體。

var speedY = 0;
var speedX = 10;
// x 方向  勻速
// y 方向  勻加速
box.timer = setInterval(function() {
     speedY += 9.8
     box.style.left = box.offsetLeft + speedX + 'px';
     box.style.top = box.offsetTop + speedY + 'px'

}, 80)

5：透明度的變換
box逐漸消失

//使用css將box的opacity 設置爲1 
var op = 1;
box.timer = setInterval(function() {
     op = op - 0.01;
     div.style.opacity = op
     //或者
     //div.style.opacity = getComputedStyle(div).opacity - 0.01;

}, 80);

6：緩衝運動
速度一開始很大，然後慢慢變小，比較類似自然界中的緩衝運動

//一開始box 在 （0，0）位置，我們將box運動到（300,0）位置
var target = 300; //目標位置
box.timer = setInterval(function() {
     //target - div.offsetLeft 是元素距離目標的路程，隨着越來越靠近目標，這個值就越來越小，如果把這個值當做速度，速度一開始很大，然後慢慢變小，比較類似自然界中的緩衝運動。如果把這個值直接當速度，一下子就到，所以除以8以後當做速度
     var speed = (target - div.offsetLeft) / 8;
     //所以要對速度向上取整得到速度1，當speed小於0.375的時候，div就不會移動了
     speed = Math.ceil(speed);
     box.style.left = div.offsetLeft + speed + 'px';
     if(box.offsetLeft == target) {
          //到達目標清除定時器
          clearInterval(box.timer);
     }
}, 30);

考慮到運動的時候可能往前，也可以能往後，增加判斷，封裝成函數

function animate(div,targetX) {
    var target = targetX;
    div.timer =  setInterval(function () {
        var speed = (target - div.offsetTop)/8;
        speed = (speed>0? Math.ceil(speed): Math.floor(speed));
        div.style.top = div.offsetTop + speed +'px';
        if(div.offsetTop == target){
            clearInterval(div.timer);
        }
    },30);
}

7：多屬性緩衝運動函數封裝
上面的封裝只能固定的在x方向做動畫
如果想讓一個div 從一個點運動到另一個點，怎麼辦？
比如從（0，0）到（100，200）
這個時候我們把第二個參數改爲一個這樣的對象 {left:100;top:200}

function animate(div, obj) {
     //{left:100;top:200}
     //{left:100}
     clearInterval(div.timer);
     div.timer = setInterval(function() {
          var flag = true; //假設已經到了目的地
          for(var key in obj) {
              console.log(key) //left   top
              console.log(obj[key]) //300
              var target = obj[key]; //目標值
              // getComputedStyle['left']  元素left 屬性 當前值
              var speed = (target - parseInt(getComputedStyle(div)[key])) / 8;
              speed = (speed > 0 ? Math.ceil(speed) : Math.floor(speed));
              div.style[key] = parseInt(getComputedStyle(div)[key]) + speed + 'px';
              if(parseInt(getComputedStyle(div)[key]) != target) {
                   flag = false;
              }
          }
          //必須等到所有的 屬性都到達目的地 才能結束定時器
          if(flag == true) {
              clearInterval(div.timer);
          }
     }, 30);
}

上面咱們就封裝了一個運動函數，說白了，就是封裝一次以後，我們再做一些動畫就非常方便！前人栽樹後人乘涼，便是封裝的好處！

新人初來，有很多欠缺需要大家多多指教，逆疫而戰大家加油