Javascript 完美運動架構(逐行分析代碼，讓你輕鬆了運動的原理)，javascript逐行

Javascript 完美運動架構(逐行分析代碼，讓你輕鬆了運動的原理)，javascript逐行

大家一聽這名字就知道，有了這套架構 網上的效果基本都是可以實現的。實際上之前的運動架構還是有局限性的，就是不能讓好幾個值一塊運動。

那這個問題怎麼解決呢？ 我們先來看看之前的運動架構

function getStyle(obj, name) {  if (obj.currentStyle) {    return obj.currentStyle[name];  } else {    return getComputedStyle(obj, null)[name];  }}function startMove(obj, attr, iTarget) {  clearInterval(obj.time);  obj.time = setInterval(function() {    var cur = 0;    if (attr == 'opacity') {      cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);    } else {      cur = parseInt(getStyle(obj, attr));    }    var speed = (iTarget - cur) / 6;    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);    if (cur == iTarget) {      clearInterval(obj.time);    } else {      if (attr == 'opacity') {        obj.style.filter = 'alpha(opacity=' + cur + speed + ')';        obj.style.opacity = (cur + speed) / 100;      } else {        obj.style[attr] = cur + speed + 'px';      }    }  }, 30);}

怎麼修改呢？ 實際上很簡單， 在過去的架構中，你每一次只能傳一個樣式，和一個值。那麼現在把這些改成一個json對象。相信大家就明白了。

我們調用的時候就是startMove(oDiv,{width:200,height:200}); 如果需要的話就在加上回呼函數。那麼我們具體看看代碼是怎麼修改的。

function startMove(obj, json, fnEnd){  var MAX=18;  //每次調用就只有一個定時器在工作(開始運動時關閉已有定時器)  //並且關閉或者開啟都是當前物體的定時器，已防止與頁面上其他定時器的衝突，使每個定時器都互不干擾   clearInterval(obj.timer);   obj.timer=setInterval(function (){        var bStop=true; // 假設：所有的值都已經到了        for(var name in json)    {      var iTarget=json[name]; // 目標點            //處理透明度，不能使用parseInt否則就為0了             if(name=='opacity')      {                // *100 會有誤差 0000007 之類的 所以要用 Math.round() 會四捨五入        var cur=Math.round(parseFloat(getStyle(obj, name))*100);       }      else      {        var cur=parseInt(getStyle(obj, name)); // cur 當前移動的數值      }            var speed=(iTarget-cur)/5; // 物體運動的速度 數字越小動的越慢 /5 : 自訂的數字            speed=speed>0?Math.ceil(speed):Math.floor(speed);            if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX;            if(name=='opacity')      {        obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE        obj.style.opacity=(cur+speed)/100; //ff chrome      }      else      {        obj.style[name]=cur+speed+'px';      }            // 某個值不等於目標點       if(cur!=iTarget)      {        bStop=false;      }    }        // 都達到了目標點    if(bStop)    {      clearInterval(obj.timer);            if(fnEnd) //只有傳了這個函數才去調用      {        fnEnd();      }    }  }, 20);}

為什麼會有bstop的假設呢？

其實如果我這樣調用startMove(oDiv,{width:101,height:200}); 寬度變成101 已經完成運動了，高度沒有到， 但是我們可能已經關閉了當前的定時器。運動已經結束了，就會出現一個特殊情況下的bug。解釋一下：

實際上來說，需要所有的運動都到了才關閉定時器，反過來說，如果沒有不到的，那就關閉。在程式上就是定義一個布爾值，一開始為true，假設

所有的值都已經到了，如果說有一個值不等於目標點，bstop為false 。 在整個迴圈結束後，bstop 為ture 就說明所有運動都完成了，這個時候就關閉定時器。

那麼這個運動架構基本已經完成了，適用css2 不適用css3。

總結：

運動架構的演變過程

startMove(iTarget) 運動架構
startMove(obj,iTarget) 多物體
startMove(obj,attr,iTarget) 任意值
startMove(obj,attr,iTarget,fn) 鏈式運動
startMove(obj,json,fn) 完美運動

O(∩_∩)O謝謝 ~