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

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

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

<style type="text/css">#taxiway{width:800px;height:100px;background:#E8E8FF;}#move{width:100px;height:100px;background:#a9ea00;}</style></p><div id="taxiway"><div id="move" onclick="move(this)"></div></div>點擊可移動上面的綠色方塊<script type="text/javascript"> 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 }; }; 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) } } //輔助函數3，相當于$()，不用$符號命名是因為博客園在用JQuery，會引起命名沖突 //我新一代查代元素的方法，擁有緩存能力 var cache = [] var _ = function(id){ return cache[id] || (cache[id] = document.getElementById(id)); } var move = 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 delta = 1.5, change = true; el.onclick = function(){ if(change){ el.innerHTML = "加速"; (function(){ setTimeout(function(){ el.style.left = getCoords(el).left + speed + "px";//移動 speed *= delta;//下一次移動的距離 if(getCoords(el).left >= end){ el.style.left = end + "px"; change = false; delta = 0.85, speed = 100; }else{ setTimeout(arguments.callee,25);//每移動一次停留25毫秒 } },25) })() }else{ el.innerHTML = "減速"; (function(){ setTimeout(function(){ el.style.left = getCoords(el).left - speed + "px";//移動 speed = Math.ceil(speed * delta );//下一次移動的距離 if(getCoords(el).left <= begin ){ el.style.left = begin + "px"; change = true; delta = 1.5, speed = 10; }else{ setTimeout(arguments.callee,25); } },25) })() } } } window.onload = function(){ move(_("move")) }</script><center>本代碼來自網，更多教程請訪問：<a href=http://www.jyygyx.com/ target="new" _fcksavedurl="http://www.jyygyx.com/ target="new"">http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運行!

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

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

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

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

轉自：http://www.cnblogs.com/rubylouvre/

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈