原生JavaScript之完美運動框架

在這裏呢，咱們先來講下關於完美運動框架的封裝思路。

  想讓一個物體運動呢，咱們必須給那個物體加上定位屬性；其次想讓一個物體自動運動的話必須用到定時器；知道了這個後，基本上就差很少作完了（哈哈，給你個小安慰）！

  首先在封裝框架以前咱們得封裝一下獲取非行間樣式，這樣的話咱們就不僅僅侷限於（offsetwidth，offsetheight）了,而是你想讓哪一個屬性運動就能讓哪一個屬性運動了。由於獲取非行間樣式是有兼容性的（IE是個過不去的檻，習慣就好），因此咱們得作下小小的兼容：

function getStyle(obj, attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr]
    }else{
        return getComputedStyle(obj, false)[attr]
    }
}
複製代碼

而後呢咱們就能夠開始封裝完美運動框架了，咱們能夠先建立一個move的函數，在這個函數中咱們能夠傳入三個值：第一個值就是要作運動的對象（obj）；第二個是要傳入的樣式，（若是咱們想要寬高同時變化呢？單單的傳一個值是知足不了咱們的）那麼怎麼傳入多個呢，咱們能夠採用了json對象的形式去傳入；最後一個參數則是一個回調函數（fn），回調函數的做用呢就是能夠實現鏈式運動（那麼什麼是鏈式運動呢？鏈式運動就是當這個函數運行完畢之後能夠繼續執行下一個函數）從而達到咱們想要的效果；代碼以下：

function move(obj, json, fn){}
複製代碼

  咱們寫運動框架的時候首先得初步瞭解運動框架搭建的過程。第一步即關閉定時器，第二步即開啓定時器，第三步即獲取當前元素的初始值，第四步即設置速度，第五步即處理速度的小數問題，第六步即判斷終止的條件（嘻嘻，只要熟記了這幾個步驟，這個運動框架基本上寫完了）。

  按照步驟，首先則是關閉定時器了。而後就是開啓定時器了，由於在json對象中咱們傳入的參數多是多個，因此會發生搶定時器的現象，怎麼解決呢？那就是給每一個對象都加上一個定時器（obj.timer），而後再遍歷出json數據。以下面所示：

function move(obj, json, fn){
  //第一步，關閉定時器
    clearInterval(obj.timer);
  //第二部，開啓定時器
    obj.timer = setInterval(function(){
      //遍歷json數據
      for（var attr in json){
        
      }
    }    
}
複製代碼

顧名思義遍歷完json對象以後那就是計算速度了，在計算速度以前呢咱們首先得判斷一下傳入的是不是透明度（opacity）。爲何要判斷是否爲透明度呢？緣由很簡單，由於透明度是不帶單位的，而咱們其餘的屬性例如：寬度、高度啥的都是帶有單位的。而後再從中取到相對應的初始值。在這裏強調的是：由於透明的是0-1之間的小數，在瀏覽器中進行小數的運算是會出現問題的，例如在控制檯運算（0.1+0.1，0.2+0.2和0.1+0.2）結果並非咱們內心的答案，不信如圖所示：

沒騙你吧！怎麼解決呢，就是先轉爲浮點型，而後乘以100其次再去取整：代碼以下：

function move(obj, json, fn){
    //關閉定時器
    clearInterval(obj.timer);
    //開啓定時器
    obj.timer = setInterval(function(){
        var bStop = true;
        //遍歷json數據
        for(var attr in json){
            //定義初始值
            var iCur = 0;
            //判斷初始值是否爲透明度
            if(attr == "opacity"){
          //對小數作處理
                iCur = parseInt(parseFloat(getStyle(obj, attr))*100)
            }else{
          //普通值直接取整就行了
                iCur = parseInt(getStyle(obj, attr))
            }//前端全棧學習交流圈：866109386
     }//面向1-3前端開發人員
    }    //幫助突破技術瓶頸，提高思惟能力，歡迎你們。
}
複製代碼

按照咱們以前的思路該幹嗎啦？嘻嘻，該設置速度了，而後再處理速度的小數 問題。怎麼設置速度呢？其實咱們能夠利用終止點值減去初始值再除以一個係數（係數能夠順便寫喲，我我的是計較喜歡7的，因此我寫成7了）；不要問我爲何喜歡7哈，真的不要問我問什麼，由於我只能告訴你廠長是我表哥。嘻嘻，開個小玩笑。 設置速度代碼以下：

//設置速度
var speed = (json[attr]-iCur)/7;
//處理速度的小數問題
speed = speed>0?Math.ceil(speed):Math.floor(speed);
複製代碼

  由於咱們以前json傳入的是多個值，拿寬和高來講，若是寬和高設置的大小不同（width：102px；height：300px）那麼就會出現當寬度運動完成以後高度還沒運動完成就已經關閉定時器了，那麼這確定不是咱們想要看到的。再好比若是咱們一夥人從鄉下去郊遊，去郊遊確定要有輛大巴啥的嘛，若是甲先到了約定的等車點，而後就叫司機，咱們走吧。而後他就一我的走了，咱們確定會想錘他是否是。重點來了：因此咱們要作一個判斷，判斷是否所有到達，怎麼判斷呢，咱們能夠利用開關門。代碼以下：

//判斷是否所有到達，若是沒有所有到達則爲false
if(iCur != json[attr]){
    bStop = false
}
複製代碼

  而後再判斷屬性是爲透明度仍是爲普通值。記得作兼容喲，IE8如下是不支持opacity這個屬性的，要換成filter.代碼以下：

//判斷屬性是否爲透明度
if(attr == "opacity"){
    //若是爲opacity則用速度加上初始值再除以一百
    obj.style.opacity = (speed+iCur)/100;
    //兼容IE
    obj.style.filter = "alpha(opacity: +(speed+iCur)+)";
 }else{
     //爲普通值時要看清attr是變量不能點而是用中括號
     obj.style[attr] = speed+iCur+"px";
}
複製代碼

 最後則是判斷終止條件了：若是所有到達則關閉定時器且若是fn存在的話也執行fn();代碼以下：

//判斷bStop是否爲true
if(bStop){
    //若是爲true則關閉定時器。前端全棧學習交流圈：866109386
    clearInterval(obj.timer);//面向1-3前端開發人員
    //若是fn存在的話執行fn()
    fn&&fn(); //幫助突破技術瓶頸，提高思惟能力，歡迎你們。
}
複製代碼

完美運動框架就這樣封裝好啦，簡單吧！完整代碼以下：

<script>
    //獲取非行間樣式
    function getStyle(obj, attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr]
        }else{
            return getComputedStyle(obj, false)[attr]
        }
    }
    function move(obj, json, fn){
        //定義開關門
        var bStop = true;
        //關閉定時器
        clearInterval(obj.timer);
        //開啓定時器
        obj.timer = setInterval(function(){
            var bStop = true;
            //遍歷json數據
            for(var attr in json){
                //定義初始值
                var iCur = 0;
                //判斷初始值是否爲透明度
                if(attr == "opacity"){
                    iCur = parseInt(parseFloat(getStyle(obj, attr))*100)
                }else{
                    iCur = parseInt(getStyle(obj, attr))
                }
                //設置速度
                var speed = (json[attr]-iCur)/7;
                //處理速度的小數問題
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
                //判斷是否所有到達，若是沒有所有到達則爲false
                if(iCur != json[attr]){
                    bStop = false
                }
                //判斷屬性是否爲透明度
                if(attr == "opacity"){
                    //若是爲opacity則用速度加上初始值再除以一百
                    obj.style.opacity = (speed+iCur)/100;
                    //兼容IE
                    obj.style.filter = "alpha(opacity: +(speed+iCur)+)";
                 }else{
                     //爲普通值時要看清attr是變量不能點而是用中括號
                     obj.style[attr] = speed+iCur+"px";
                 }
            }
            //判斷bStop是否爲true
            if(bStop){
                //若是爲true則關閉定時器
                clearInterval(obj.timer);
                //若是fn存在的話執行fn()
                fn&&fn();
            }
            
        }, 27)
    }
</script>
複製代碼