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);}

實際上來說他就是相當於一個階段型的運動架構，一個物體運動到某個地方就停下來了。那麼怎麼能實現鏈式運動呢？

我們在加一個參數fnEnd ,這個是個函數，他會在運動結束的時候被調用。

當然這個函數可以傳可以不傳，所以需要做個判斷。只有當傳入的時候在調用即可。

原理就是： 一個運動完成 在開始下次的運動。

這樣就能夠完成鏈式運動，簡單吧，讓我們看看代碼。

<script src="js/move_lianshi.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">            window.onload=function(){                var oDiv=document.getElementById("div1");                oDiv.onmouseover=function(){                    startMove(oDiv,'width',300,function(){                        startMove(oDiv,'height',300);                    });                };            }        </script>                            

Javascript:

function getStyle(obj, name) {    if (obj.currentStyle) {        return obj.currentStyle[name];    } else {        return getComputedStyle(obj, null)[name];    }}function startMove(obj, attr, iTarget,fnEnd) {    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);            if(fnEnd)fnEnd();        } 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);}

這樣Div就會先變寬在變高。

我們現在這個運動架構還是會有局限性，那是什麼呢？

那麼就是不能同時運動，也就是說我想讓Div 同時變大變寬 那又怎麼辦呢？在下一次更新的時候，我們會解決這個問題，並且推出一個完美的運動架構，這個運動架構能夠支援大多數的運動。

敬請期待~