javascript的緩動效果（第1部分）

緩動，學名為Tween，緩衝移動的簡稱。要想頁面內容切換起來舒服，就使用淡入淡出特效，要想讓頁面元素動起來自然，就要使用緩動效果。這兩個混合起來，可以衍生多種特效的。感謝Flash開發人員為我們做了那麼多先行研究，我們直接把它們拆出來裝在各種菜單與相簿中。我們先從最簡單的東西做起，加速與減速。

既然是緩動，它就一定涉及以下概念：距離，時間與速度。我們可以想象存在一條直線L，點A與點B就是L的起點與終點，有一個點C在直線L上移動，從點A到點B。所需的時間通常都是未知，但速度我們一定要制定。看下面的圖，我們想讓綠色的方塊在淡緊色的滑動帶上移動。滑動帶左上方就相當於點A，右上方就相當於B點，方塊的左上方就相當於點C，移動距離為兩者的寬度之差。由於我們移動的物體是存在寬度，也就是說點C永遠不可能與點B重合。但一個準確的目的地（為了方便，我們把它稱之為點D）是必須的，我們一定要計算它出來。因為在加速運動中，點C隨時可能超過點D，當點超過它時，我們就要終止此移動，並把點C拉回到點D上。

點擊可移動綠色方塊

為了擷取它們在頁面上的座標與尺寸，getCoords()與getStyle()又到出場時間了。對不起，我實在沒有意思來炫耀我的函數。更何況getStyle()被砍去了不少東西，威力沒有以前那麼強大。

  //輔助函數1  var getCoords = function(el){    var box = el.getBoundingClientRect(),    doc = el.ownerDocument,    body = doc.body,    html = doc.documentElement,    clientTop = html.clientTop || body.clientTop || 0,    clientLeft = html.clientLeft || body.clientLeft || 0,    top  = box.top  + (self.pageYOffset || html.scrollTop  ||  body.scrollTop ) - clientTop,    left = box.left + (self.pageXOffset || html.scrollLeft ||  body.scrollLeft) - clientLeft    return { 'top': top, 'left': left };  };  //輔助函數2  var getStyle = function(el, style){    if(!+"\v1"){      style = style.replace(/\-(\w)/g, function(all, letter){        return letter.toUpperCase();      });      var value = el.currentStyle[style];      (value == "auto")&&(value = "0px" );      return value;    }else{      return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)    }  }

那麼我們怎麼移動呢？在javascript只有讓它變為絕對位置對象，給它的top與left賦值。它就會立即移動到相應的座標上。由於javascript處理位置變化太有效率，根本不可能讓你有“移動”的感覺，感覺是直接從點C直接跳到點D。我們必須讓物體每移動一點點，就停一下，讓眼睛有個殘影。根據人眼睛的視覺停留效應，若前一幅畫像留在大腦中的印象還沒消失，後一幅畫像就接踵而至，而且兩副畫面間的差別很小，就會有“動”的感覺。那麼停留多麼毫秒最合適呢？我們不但要照顧人的眼睛，還要顧及一下顯示器的顯示速度與瀏覽器的渲染速度。根據外國的統計，25毫秒為最佳數值。其實，這個數值我們應該當作常識來記住。聯想一下，日本動畫好像有個規定是1秒30張畫，中國的，比較垃圾，是1秒24張。用1秒去除以張數，就得到每張停留的時間。日本的那個27.77毫秒已經很接近我們的25毫秒了，因為瀏覽器的渲染速度明顯不如電視機的渲染速度，尤其是IE6這個拉後腿的。要實現加速度，就是讓它每次移動快一點點，讓上一次移動的距離乘以一個大於1的數便可。

  //輔助函數3，相當於$()，不用$符號命名是因為部落格園在用JQuery，會引起命名衝突  //我新一代查代元素的方法，擁有緩衝能力  var cache = []  var _ = function(id){    return cache[id] || (cache[id] = document.getElementById(id));  }  //主函數：加速移動  var accelerate= function(el){    el.style.position = "absolute";    var begin =  getCoords(el).left,    distance = parseFloat(getStyle(_("taxiway"),"width")) - parseFloat(getStyle(el,"width")),    end = begin + distance,    speed = 10;//第一次移動的速度，單位px/ms，隱式地乘以1ms    (function(){      setTimeout(function(){        el.style.left = getCoords(el).left + speed + "px";//移動        speed *= 1.5;//下一次移動的距離        if(getCoords(el).left >= end){          el.style.left = end + "px";        }else{                 setTimeout(arguments.callee,25);//每移動一次停留25毫秒        }      },25)    })()  }

明白了加速，減速就好辦了。我們給第一次移動的距離一個很大的數，往後每次減少一點點，換言之乘以一個小於1的數。但這裡有個注意點，如果有一次，它移動的距離少於1px怎麼辦？！它再往後也是少於1px。瀏覽器就會忽略這個值，當作0來處理。這樣一來，它就會停在中途不動了。為了防止這樣可怕的事發生，我們利用Math.ceil來確保其最小移動距離為1px，哪怕最後的勻速移動也要抵達終點。

 //主函數：減速移動  var decelerate = function(el){    el.style.position = "absolute";    var begin =  getCoords(el).left,    distance = parseFloat(getStyle(_("taxiway"),"width")) - parseFloat(getStyle(el,"width")),    end = begin + distance,    speed = 100;//第一次移動的速度，單位px/ms，隱式地乘以1ms    (function(){      setTimeout(function(){        el.style.left = getCoords(el).left + speed + "px";//移動        speed = Math.ceil(speed * 0.9);//下一次移動的距離        if(getCoords(el).left <= end){          el.style.left = end + "px";        }else{                 setTimeout(arguments.callee,25);        }      },25)    })()  }

現在函數的功能還很弱，主要是由於在抽象與制定上有所欠缺，如果克服這些缺點並配合Robert Penner大神的緩動公式，我們就可以搞出花樣繁多的緩動效果來。而這正是下部分要講解的，敬請期待，也希望大家多多留言支援。