|
但我不喜歡flash流派的緩動(dòng)公式，為了使用prototype流派的緩動(dòng)公式，我進(jìn)一步改進(jìn)與抽象化我的緩動(dòng)函數(shù)
//******************@author : 司徒正美************
var transition = function(el){
el.style.position = "absolute";
var options = arguments[1] || {},
begin = options.begin,//開始位置
change = options.change,//變化量
duration = options.duration || 500,//緩動(dòng)效果持續(xù)時(shí)間
field = options.field,//必須指定，基本上對(duì)top,left,width,height這個(gè)屬性進(jìn)行設(shè)置
ftp = options.ftp || 50,
onStart = options.onStart || function(){},
onEnd = options.onEnd || function(){},
ease = options.ease,//要使用的緩動(dòng)公式
end = begin + change,//結(jié)束位置
startTime = new Date().getTime();//開始執(zhí)行的時(shí)間
onStart();
(function(){
setTimeout(function(){
var newTime = new Date().getTime(),//當(dāng)前幀開始的時(shí)間
timestamp = newTime - startTime,//逝去時(shí)間
delta = ease(timestamp / duration);
el.style[field] = Math.ceil(begin + delta * change) + "px"
if(duration <= timestamp){
el.style[field] = end + "px";
onEnd();
}else{
setTimeout(arguments.callee,1000/ftp);
}
},1000/ftp)
})()
}
| 參數(shù) |
類型 |
說明 |
| el |
element |
必需，為頁面元素 |
| begin |
number |
必需，開始的位置 |
| change |
number |
必需，要移動(dòng)的距離 |
| duration |
number |
可選，緩動(dòng)效果持續(xù)時(shí)間，默認(rèn)是500ms。建議取300~1000ms。 |
| field |
string |
必需，要發(fā)生變化的樣式屬性。請(qǐng)?jiān)趖op，left，bottom,right，width與height中選擇。 |
| ftp |
number |
可選，每秒進(jìn)行多少幀動(dòng)畫，默認(rèn)50幀，保證流暢播放。一些參考資料，日本動(dòng)畫1秒36幀，中國卡通24幀，賽車游戲60幀。 |
| ease |
function |
必需，緩動(dòng)公式，參數(shù)為0~1之間的數(shù)�？蓞⒖嘉蚁旅娼o出的45條公式。 |
| onStart |
function |
可選，在開始時(shí)執(zhí)行。 |
| onEnd |
function |
可選，在結(jié)束時(shí)執(zhí)行。 |
prototype流派的緩動(dòng)公式，只需一個(gè)參數(shù)（增至45種）：
代碼拷貝框
[Ctrl+A 全部選擇 然后拷貝]
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
除了這45條公式外，我們還可以制定自己的緩動(dòng)公式。正如我在上面表格中提到，它在運(yùn)行過程是不執(zhí)行回調(diào)函數(shù)時(shí)，但你們可以在運(yùn)行框中看到，我可以實(shí)現(xiàn)一邊移動(dòng)一邊記錄點(diǎn)的坐標(biāo)。這是怎樣實(shí)現(xiàn)的呢？我們只要把上面的緩動(dòng)公式的任何一條塞進(jìn)一個(gè)只有一個(gè)參數(shù)的函數(shù)就行了。當(dāng)然此函數(shù)要有返回，供繼續(xù)向下調(diào)用。以下就是一個(gè)模板：
var myTween = function(pos){ //緩動(dòng)公式
var value = tween[ease](pos);
//***********這上面是固定的**************
indicator.style.display = "block";
marker.style.display = "block";
marker.style.left = Math.round((pos*200))+'px';
marker.style.bottom = Math.round(((value*200)-min)*factor)+'px';
label.innerHTML = Math.round((pos*200))+'px';
//************這下面是固定的*************
return value;
}
更多示例，不懂再留言給我。
<div class="taxiway">
<div class="move" onclick="transition(this,{field:'left',begin:parseFloat(getCoords(this).left),change:700,ease:tween.bouncePast})"></div>
</div>
<div class="taxiway">
<div class="move" onclick="transition(this,{field:'width',begin:parseFloat(getStyle(this,'width')),change:300,ease:tween.spring})"></div>
</div>
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2949321-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2009/7019.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 javascript的緩動(dòng)效果 [3] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 4 頁 javascript的緩動(dòng)效果 [4]
