|
那么我們?cè)趺匆苿?dòng)呢？在javascript只有讓它變?yōu)榻^對(duì)定位對(duì)象，給它的top與left賦值。它就會(huì)立即移動(dòng)到相應(yīng)的坐標(biāo)上。由于javascript處理位置變化太有效率，根本不可能讓你有“移動(dòng)”的感覺(jué)，感覺(jué)是直接從點(diǎn)C直接跳到點(diǎn)D。我們必須讓物體每移動(dòng)一點(diǎn)點(diǎn)，就停一下，讓眼睛有個(gè)殘影。根據(jù)人眼睛的視覺(jué)停留效應(yīng)，若前一幅畫(huà)像留在大腦中的印象還沒(méi)消失，后一幅畫(huà)像就接踵而至，而且兩副畫(huà)面間的差別很小，就會(huì)有“動(dòng)”的感覺(jué)。那么停留多么毫秒最合適呢？我們不但要照顧人的眼睛，還要顧及一下顯示器的顯示速度與瀏覽器的渲染速度。根據(jù)外國(guó)的統(tǒng)計(jì)，25毫秒為最佳數(shù)值。其實(shí)，這個(gè)數(shù)值我們應(yīng)該當(dāng)作常識(shí)來(lái)記住。聯(lián)想一下，日本動(dòng)畫(huà)好像有個(gè)規(guī)定是1秒30張畫(huà)，中國(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ù)便可。
//輔助函數(shù)3，相當(dāng)于$()，不用$符號(hào)命名是因?yàn)椴┛蛨@在用JQuery，會(huì)引起命名沖突
//我新一代查代元素的方法，擁有緩存能力
var cache = []
var _ = function(id){
return cache[id] || (cache[id] = document.getElementById(id));
}
//主函數(shù)：加速移動(dòng)
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;//第一次移動(dòng)的速度，單位px/ms，隱式地乘以1ms
(function(){
setTimeout(function(){
el.style.left = getCoords(el).left + speed + "px";//移動(dòng)
speed *= 1.5;//下一次移動(dòng)的距離
if(getCoords(el).left >= end){
el.style.left = end + "px";
}else{
setTimeout(arguments.callee,25);//每移動(dòng)一次停留25毫秒
}
},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)。
//主函數(shù)：減速移動(dòng)
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;//第一次移動(dòng)的速度，單位px/ms，隱式地乘以1ms
(function(){
setTimeout(function(){
el.style.left = getCoords(el).left + speed + "px";//移動(dòng)
speed = Math.ceil(speed * 0.9);//下一次移動(dòng)的距離
if(getCoords(el).left <= end){
el.style.left = end + "px";
}else{
setTimeout(arguments.callee,25);
}
},25)
})()
}
現(xiàn)在函數(shù)的功能還很弱，主要是由于在抽象與制定上有所欠缺，如果克服這些缺點(diǎn)并配合Robert Penner大神的緩動(dòng)公式，我們就可以搞出花樣繁多的緩動(dòng)效果來(lái)。而這正是下面要講解的。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) javascript的緩動(dòng)效果 [1] 下一頁(yè) javascript的緩動(dòng)效果 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) javascript的緩動(dòng)效果 [2]
