原生JavaScript運動功能系列（四）：多物體多值鏈式運動

• 原生JavaScript運動功能系列（一）：運動功能剖析與勻速運動實現
• 原生JavaScript運動功能系列（二）：緩衝運動
• 原生JavaScript運動功能系列（三）：多物體多值運動

 多物體多值鏈式運動

這篇部落格的內容本來是安排在上一篇部落格的內容裡面的，但是後來考慮篇幅的問題，就單獨拿出來了，所以就不過多就多物體多值運動的原理解析了，如果對程式碼不是很理解的話可以回到前面的部落格檢視我的具體分析，整個運動系列的前面的部落格連線我都放到了最上面。所以這麼部落格直接進入鏈式運動分析。

所謂的鏈式運動就是一次觸發後，多個動畫函式自動連續呼叫執行。聰明的你應該想到了解決方法，解決鏈式呼叫最直接的方法當然非回撥函式莫屬了，在這篇部落格不討論回撥機制的負面問題，後面會有相關部落格來解析回撥機制的負面內容，這篇部落格我們就用回撥函式來實現鏈式運動，畢竟在絕大多是不是特別複雜的動畫設計中還是使用回撥函式比較方便。所以，回撥函式也不是解決鏈式運動的唯一方案，寫完這篇部落格我就會基於仿寫jQuery的佇列來實現。

回撥這種很簡單的機制，也沒有太多需要分析的，直接上示例程式碼，我再基於程式碼來做一些解釋。

//css
div{
    width:100px;
    height:100px;
    background:red;
    position: absolute;
    left: 0px;
    opacity: 1;
}
#top{
    top: 100px;
}
#bottom{
    top: 300px;    
}
//html
<div id="top"></div>
<div id="bottom"></div>
//js
var oDivArray = document.getElementsByTagName('div');
var timer = null;
var targetObj = {
    width:400,
    height:400,
    opacity:50,
    left:300,
    top:200
}
oDivArray[0].onclick = function(){
    startMove(this,targetObj,function(){
        startMove(oDivArray[1],targetObj);
    });
}
function getStyle(obj,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(obj,false)[attr];
    }else{
        return obj.currentStyle[attr];
    }
}
function startMove(obj,json,callback){
    clearInterval(obj.timer);
    var iSpeed,iCur;
    obj.timer = setInterval(function(){
        var bStop = true;
        for(var attr in json){
            if(attr == 'opacity'){
                iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
            }else{
                iCur = parseInt(getStyle(obj,attr));
            }
            iSpeed = (json[attr]-iCur)/7; 
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

            if(attr == 'opacity'){
                obj.style.opacity=(iCur+iSpeed)/100;
            }else{
                obj.style[attr]=iCur+iSpeed+'px';
            }
            if(iCur != json[attr]){
                bStop= false;
            }
        }
        if(bStop){
            clearInterval(obj.timer);
            typeof callback == 'function' ? callback() : '';
        }
    },30);
}

相對於上一篇部落格的多值運動程式碼只多了66行這一行程式碼，方法多出一個callback回撥函式的形參（因數divisor這個引數等下再講），在觸發動畫函式時傳入一個回撥函式來觸發以下動畫就Ok了，簡單的我都不知道怎麼說了。所以下面來湊內容，前面我提取動畫函式時，第三個引數提取的是divisor（因數）來改變動畫速度的引數，其實這個引數實質上沒有多大意義（就改變速度而言），如果你使用jQuery的animate這個動畫方法，這個方法的第三個形參是“easing”，用來設定不同運動點的速度，甚至還可以基於外掛來實現改變運動軌跡，而第二個引數用來規定動畫執行時間，這是我在前面提取方法是有意的將因數提取出來的原因，就是為了後面來實現更jQuery一樣的功能，但這是後話了，這個設計比較複雜，需要一些時間來完成。

所以，在運動系列部落格的第一部分，也就是實現輪播圖外掛這個過程，暫時不會提取divisor這個引數了。運動系列的部落格第二部分會基於我自己的仿寫jQuery來實現這些功能，這是我對這個系列部落格的規劃。希望大家多多支援啦。