實(shí)例講解Javascript緩動(dòng)效果
我們這里將討論的是Javascript緩動(dòng)效果的實(shí)現(xiàn)，這個(gè)看似沒有實(shí)際作用的功能，其實(shí)實(shí)現(xiàn)更多花樣繁多Javascript緩動(dòng)效果的基石。
緩動(dòng)，學(xué)名為Tween，緩沖移動(dòng)的簡(jiǎn)稱。要想頁(yè)面內(nèi)容切換起來(lái)舒服，就使用淡入淡出特效，要想讓頁(yè)面元素動(dòng)起來(lái)自然，就要使用Javascript緩動(dòng)效果。這兩個(gè)混合起來(lái)，可以衍生多種特效的。感謝Flash開發(fā)人員為我們做了那么多先行研究，我們直接把它們拆出來(lái)裝在各種菜單與相冊(cè)中。我們先從最簡(jiǎn)單的東西做起，加速與減速。
既然是緩動(dòng)，它就一定涉及以下概念：距離，時(shí)間與速度。我們可以想象存在一條直線L，點(diǎn)A與點(diǎn)B就是L的起點(diǎn)與終點(diǎn)，有一個(gè)點(diǎn)C在直線L上移動(dòng)，從點(diǎn)A到點(diǎn)B。所需的時(shí)間通常都是未知，但速度我們一定要制定。看下面的圖，我們想讓綠色的方塊在淡緊色的滑動(dòng)帶上移動(dòng)?；瑒?dòng)帶左上角就相當(dāng)于點(diǎn)A，右上角就相當(dāng)于B點(diǎn)，方塊的左上角就相當(dāng)于點(diǎn)C，移動(dòng)距離為兩者的寬度之差。由于我們移動(dòng)的物體是存在寬度，也就是說點(diǎn)C永遠(yuǎn)不可能與點(diǎn)B重合。但一個(gè)準(zhǔn)確的目的地（為了方便，我們把它稱之為點(diǎn)D）是必須的，我們一定要計(jì)算它出來(lái)。因?yàn)樵诩铀龠\(yùn)動(dòng)中，點(diǎn)C隨時(shí)可能超過點(diǎn)D，當(dāng)點(diǎn)超過它時(shí)，我們就要終止此移動(dòng)，并把點(diǎn)C拉回到點(diǎn)D上。
點(diǎn)擊可移動(dòng)綠色方塊
為了獲取它們?cè)陧?yè)面上的坐標(biāo)與尺寸，getCoords()與getStyle()又到出場(chǎng)時(shí)間了。對(duì)不起，我實(shí)在沒有意思來(lái)炫耀我的函數(shù)。更何況getStyle()被砍去了不少東西，威力沒有以前那么強(qiáng)大。
01.//輔助函數(shù)1 02.var getCoords = function(el){ 03. var box = el.getBoundingClientRect(), 04. doc = el.ownerDocument, 05. body = doc.body, 06. html = doc.documentElement, 07. clientTop = html.clientTop || body.clientTop || 0, 08. clientLeft = html.clientLeft || body.clientLeft || 0, 09. top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop, 10. left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft 11. return { 'top': top, 'left': left }; 12.}; 13.//輔助函數(shù)2 14.var getStyle = function(el, style){ 15. if(!+"\v1"){ 16. style = style.replace(/\-(\w)/g, function(all, letter){ 17. return letter.toUpperCase(); 18. }); 19. var value = el.currentStyle[style]; 20. (value == "auto")&&(value = "0px" ); 21. return value; 22. }else{ 23. return document.defaultView.getComputedStyle(el, null).getPropertyValue(style) 24. } 25.}那么我們?cè)趺匆苿?dòng)呢？在Javascript只有讓它變?yōu)榻^對(duì)定位對(duì)象，給它的top與left賦值。它就會(huì)立即移動(dòng)到相應(yīng)的坐標(biāo)上。由于Javascript處理位置變化太有效率，根本不可能讓你有“移動(dòng)”的感覺，感覺是直接從點(diǎn)C直接跳到點(diǎn)D。我們必須讓物體每移動(dòng)一點(diǎn)點(diǎn)，就停一下，讓眼睛有個(gè)殘影。根據(jù)人眼睛的視覺停留效應(yīng)，若前一幅畫像留在大腦中的印象還沒消失，后一幅畫像就接踵而至，而且兩副畫面間的差別很小，就會(huì)有“動(dòng)”的感覺。那么停留多么毫秒最合適呢？我們不但要照顧人的眼睛，還要顧及一下顯示器的顯示速度與瀏覽器的渲染速度。根據(jù)外國(guó)的統(tǒng)計(jì)，25毫秒為***數(shù)值。其實(shí)，這個(gè)數(shù)值我們應(yīng)該當(dāng)作常識(shí)來(lái)記住。聯(lián)想一下，日本動(dòng)畫好像有個(gè)規(guī)定是1秒30張畫，中國(guó)的，比較垃圾，是1秒24張。用1秒去除以張數(shù)，就得到每張停留的時(shí)間。日本的那個(gè)27.77毫秒已經(jīng)很接近我們的25毫秒了，因?yàn)闉g覽器的渲染速度明顯不如電視機(jī)的渲染速度，尤其是IE6這個(gè)拉后腿的。要實(shí)現(xiàn)加速度，就是讓它每次移動(dòng)快一點(diǎn)點(diǎn)，讓上一次移動(dòng)的距離乘以一個(gè)大于1的數(shù)便可。
01.//輔助函數(shù)3，相當(dāng)于$()，不用$符號(hào)命名是因?yàn)椴┛蛨@在用JQuery，會(huì)引起命名沖突 02.//我新一代查代元素的方法，擁有緩存能力 03.var cache = [] 04.var _ = function(id){ 05. return cache[id] || (cache[id] = document.getElementById(id)); 06.} 07.//主函數(shù)：加速移動(dòng) 08.var accelerate= function(el){ 09. el.style.position = "absolute"; 10. var begin = getCoords(el).left, 11. distance = parseFloat(getStyle(_("taxiway"),"width")) - parseFloat(getStyle(el,"width")), 12. end = begin + distance, 13. speed = 10;//***次移動(dòng)的速度，單位px/ms，隱式地乘以1ms 14. (function(){ 15. setTimeout(function(){ 16. el.style.left = getCoords(el).left + speed + "px";//移動(dòng) 17. speed *= 1.5;//下一次移動(dòng)的距離 18. if(getCoords(el).left >= end){ 19. el.style.left = end + "px"; 20. }else{ 21. setTimeout(arguments.callee,25);//每移動(dòng)一次停留25毫秒 22. } 23. },25) 24. })() 25.}明白了加速，減速就好辦了。我們給***次移動(dòng)的距離一個(gè)很大的數(shù)，往后每次減少一點(diǎn)點(diǎn)，換言之乘以一個(gè)小于1的數(shù)。但這里有個(gè)注意點(diǎn)，如果有一次，它移動(dòng)的距離少于1px怎么辦？！它再往后也是少于1px。瀏覽器就會(huì)忽略這個(gè)值，當(dāng)作0來(lái)處理。這樣一來(lái)，它就會(huì)停在中途不動(dòng)了。為了防止這樣可怕的事發(fā)生，我們利用Math.ceil來(lái)確保其最小移動(dòng)距離為1px，哪怕***的勻速移動(dòng)也要抵達(dá)終點(diǎn)。
01.//主函數(shù)：減速移動(dòng) 02. var decelerate = function(el){ 03. el.style.position = "absolute"; 04. var begin = getCoords(el).left, 05. distance = parseFloat(getStyle(_("taxiway"),"width")) - parseFloat(getStyle(el,"width")), 06. end = begin + distance, 07. speed = 100;//***次移動(dòng)的速度，單位px/ms，隱式地乘以1ms 08. (function(){ 09. setTimeout(function(){ 10. el.style.left = getCoords(el).left + speed + "px";//移動(dòng) 11. speed = Math.ceil(speed * 0.9);//下一次移動(dòng)的距離 12. if(getCoords(el).left <= end){ 13. el.style.left = end + "px"; 14. }else{ 15. setTimeout(arguments.callee,25); 16. } 17. },25) 18. })() 19. }現(xiàn)在函數(shù)的功能還很弱，主要是由于在抽象與制定上有所欠缺，如果克服這些缺點(diǎn)并配合Robert Penner大神的緩動(dòng)公式，我們就可以搞出花樣繁多的緩動(dòng)效果來(lái)。
原文標(biāo)題：由淺入深javascript的緩動(dòng)效果
鏈接：http://www.cnblogs.com/rubylouvre/archive/2009/09/16/1566699.html
【編輯推薦】
- JSON是什么？為JavaScript準(zhǔn)備的數(shù)據(jù)格式
- 十個(gè)最常用的JavaScript自定義函數(shù)
- 有關(guān)JavaScript事件加載的一些延伸思考
- JavaScript使用心得匯總：從BOM和DOM談起
- ExtJS在Android模擬器上的運(yùn)行效果
