快捷導(dǎo)航

Dom元素變換效果（工具函數(shù)）

更新時(shí)間：2010年10月18日 00:33:38 作者：

　做前端或者js程序員的同學(xué)應(yīng)該都有感受，在日常工作中，用的最多的功能，一個(gè)是ajax與后臺(tái)的數(shù)據(jù)接口，另一個(gè)就是對(duì)Dom元素的style控制，來達(dá)到不同的變換效果。

用js來控制行為，控制頁面表現(xiàn)?？峙率俏覀冇盟鼇碜龅淖疃嗟氖虑榱?..
　　jQuery為什么這么受歡迎，我想，一方面是它的選擇器[selector]足夠牛B，另一方面應(yīng)該要?dú)w功于它在dom變換上做足了功夫。
　　于是，秉承著一個(gè)宅男的宗旨，周末花了兩個(gè)晚上稍微總結(jié)了一下，寫了一段控制dom元素變換的代碼，與目前強(qiáng)大的框架比起來，確實(shí)顯得有點(diǎn)拙劣，不過作為日常開發(fā)的工具函數(shù)，我想還是蠻實(shí)用的。（這也是我最初的目的 ^_^）。
　　開門見山，先把源碼完整的貼出來：（本著分享學(xué)習(xí)的原則，源代碼你可以任意修改）

復(fù)制代碼代碼如下:

 
//////////////* = Hongru.anim.js =*/////////// 
// @author: hongru.chen // 
// @date: 2010-10-17 // 
//////////////////////////////////////////// 
var Hongru = { 
get : function (id) {return document.getElementById(id)}, 
tween : { 
linear : function (f, t, d) { return t * d + f; }, 
ease : function (f, t, d) { return -t * .5 * (Math.cos(Math.PI * d) - 1) + f; } 
}, 
tweens: [], 
tweensCnt: 0, 
anim : function (obj, params) { 
var self = this, 
objList = [], 
objReturn = []; 
var animimg = function () { 
var i = -1, o; 
while( o = self.tweens[++i] ) { 
var cTime = (new Date()).getTime() - o.start; 
if (cTime < o.duration) { 
for (var k in o.val) { 
var m = o.val[k]; 
o.obj[k] = Math.ceil(o.ease(m.from, m.diff, cTime/o.duration)) + (o.cssMode ? 'px' : 0); 
} 
} else { 
cTime = o.duration; 
for (var k in o.val) { 
var m = o.val[k]; 
o.obj[k] = Math.ceil(o.ease(m.from, m.diff, cTime/o.duration)) + (o.cssMode ? 'px' : 0); 
} 
self.tweens.splice(i, 1); 
self.tweensCnt--; 
if (o.onFinish) o.onFinish (o.params); 
self.stop(); 
} 
if (!o.cssMode) o.obj.onTween(); 
} 
}; 
if (typeof obj == "string" || !obj.length) objList.push(obj); else objList = obj; 
for (var il = 0, l = objList.length; il < l; il++) { 
var obj = this.get(objList[il]) || objList[il]; 
var o = {}; 
o.val = {}; 
o.cssMode = true; 
o.o = obj; 
o.obj = obj.style; 
for (var k in params) { 
var p = params[k]; 
if (k === "cssMode") { 
if (p === false) { 
o.cssMode = false; 
o.obj = obj; 
} 
} else if (k === "onTween") { 
o.obj.onTween = p; 
} else if (k === "from") { 
for (var i in p) o.obj[i] = o.cssMode ? (Math.ceil(p[i]) + 'px') : p[i]; 
} else if (k === "to") { 
for (var i in p) { 
var from = o.cssMode ? (parseInt(o.obj[i]) || 0) : (o.obj[i] || 0); 
o.val[i] = { 
from: from, 
diff: p[i] - from 
}; 
} 
} else o[k] = params[k]; 
} 
if (!o.ease) o.ease = this.tween.ease; 
if (!o.cssMode && params['from']) o.obj.onTween(); 
o.duration = params.duration ? params.duration : 1000; 
o.start = (new Date()).getTime(); 
this.tweens.push(o); 
this.tweensCnt++; 
if (!this.running) this.running = window.setInterval(animimg, 10); 
objReturn.push(o); 
} 
return objReturn.length === 1 ? o : objReturn; 
}, 
stop : function () { 
if (!this.tweensCnt) { 
window.clearInterval(this.running); 
this.running = false; 
} 
}, 
kill : function (obj) { 
if (obj) { 
for (var i = 0; i < this.tweensCnt; i++) { 
if (this.tweens[i] === obj || this.tweens[i].o === obj || this.tweens[i].o === this.get(obj)) { 
this.tweensCnt--; 
this.tweens.splice(i, 1); 
this.stop(); 
} 
} 
} 
}, 
reset : function () { 
this.tweensCnt = 0; 
this.stop(); 
while( this.tweens.length ) { 
this.tweens.stop(); 
} 
} 
} 

從調(diào)用方式來看，其實(shí)我的實(shí)現(xiàn)方法有點(diǎn)類似于YUI，以下是個(gè)最簡(jiǎn)單的例子：

復(fù)制代碼代碼如下:

 
Hongru.anim(id, { 
from: { 
top: 0, 
left: 100 
}, 
to: { 
left: 500, 
} 
}); 

以下是調(diào)用這段代碼的效果：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

當(dāng)然，這是最簡(jiǎn)單的方式，此外，我在參數(shù)id上，花了點(diǎn)小心思，anim()的第一個(gè)參數(shù)不僅可以是我們常見的字符串"id"，也可以是HtmlObject，比如同樣是上面的代碼：

復(fù)制代碼代碼如下:

 
function tween1 (id) { //此id參數(shù)可以是obj，也可以是字符串id，還可以是數(shù)組['id1','id2','id3'] 
Hongru.anim(id, { 
from: { 
top: 0, 
left: 100 
}, 
to: { 
left: 500, 
} 
}); 
} 

可以對(duì)一個(gè)元素這樣來調(diào)用
onclick="tween1(this)"
this直接指向元素本身，演示如下。

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

另外，還可以控制多個(gè)元素同時(shí)變換，也就是說，id可以是個(gè)數(shù)組如['id1', 'id2', 'id3'].演示如下：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

以上可以支持object和數(shù)組selector的功能，暫可以稱為【功能一】，
　　【功能二】
支持回調(diào)函數(shù)callback，也就是可以實(shí)現(xiàn)咱們常說的chain-animate，鏈?zhǔn)阶儞Q。具體是通過onFinish參數(shù)來實(shí)現(xiàn)的。核心源碼很簡(jiǎn)單，就是在一個(gè)變換完畢之后判斷有沒有onFinish，如果有就調(diào)用:

復(fù)制代碼代碼如下:

 
var animimg = function () { 
var i = -1, o; 
while( o = self.tweens[++i] ) { 
var cTime = (new Date()).getTime() - o.start; 
if (cTime < o.duration) { 
for (var k in o.val) { 
var m = o.val[k]; 
o.obj[k] = Math.ceil(o.ease(m.from, m.diff, cTime/o.duration)) + (o.cssMode ? 'px' : 0); 
} 
} else { 
cTime = o.duration; 
for (var k in o.val) { 
var m = o.val[k]; 
o.obj[k] = Math.ceil(o.ease(m.from, m.diff, cTime/o.duration)) + (o.cssMode ? 'px' : 0); 
} 
self.tweens.splice(i, 1); 
self.tweensCnt--; 
if (o.onFinish) o.onFinish (o.params); 
self.stop(); 
} 
if (!o.cssMode) o.obj.onTween(); 
} 
}; 

下面是通過遞歸調(diào)用實(shí)現(xiàn)chain-animate的一個(gè)演示：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

到這里，相信以前做過類似工作的同學(xué)們都覺得這還不夠，畢竟如果只實(shí)現(xiàn)所有和‘盒模型'沾邊的屬性的變換應(yīng)該都不算難事。比如高寬，padding，margin，left，top等等這些可以用像素做單位的屬性。他們的變換都可以統(tǒng)一起來。但是如果要實(shí)現(xiàn)顏色變換，透明度變換呢，恐怕就不是我的短短幾十百來行代碼就可以做到的。
是的，我承認(rèn)，要把顏色，透明度等等所有屬性變換都封裝起來，需要做的判斷就不是一點(diǎn)兩點(diǎn)了。所以呢，在這里，我也沒有對(duì)“盒模型”以外的屬性變換做封裝。但并不代表沒有想到他們的實(shí)現(xiàn)方法。
　　既然寫死在代碼里要費(fèi)事，那就我們自己調(diào)用的時(shí)候多寫兩句代碼不就好了嗎，畢竟代碼是死的，人是活的。我這里做了個(gè)cssMode的參數(shù)判斷（思路是借鑒一個(gè)老外的）。代碼成本很低。如果不是可以用px做單位的屬性，我們可以自己控制它的樣式變換。比如實(shí)現(xiàn)背景色變換：

復(fù)制代碼代碼如下:

 
function test3 (id) { 
Hongru.anim(id, { 
cssMode: false, // animation will be handled by an external function 
onTween : function () { 
// custom function, can be as simple or as complex as needed 
this.style.background = "RGB("+this.r+","+this.g+","this.b")"; 
}, 
from : { r: 0, g: 0, b: 0 }, 
to: { r: 255, g: 128, b: 100 } 
}); 
} 

把cssMode設(shè)置為false之后，會(huì)執(zhí)行onTween里的代碼，這樣就可以自行控制樣式的變換了，如上。演示如下：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

同樣，透明度也可以自行設(shè)置，

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

好了，鑒于篇幅和時(shí)間，此文基本都在介紹功能，對(duì)代碼沒怎么細(xì)講，有興趣的同學(xué)可以自己看看，反正源碼也貼出來了，而且原理都不難。
另外，在這個(gè)函數(shù)使用中，Hongru.kill(id)是停止指定對(duì)象的變換。Hongru.reset()是停止所有正在變換的效果。至于Hongru本身，大家可以隨意更改。