快捷導(dǎo)航

如何簡(jiǎn)單地用YUI做JavaScript動(dòng)畫

更新時(shí)間：2007年03月10日 00:00:00 作者：

原文地址：http://www.jackslocum.com/blog/2006/08/24/javascript-animations-with-yahoo-ui-made-easy/

YUI的動(dòng)畫類簡(jiǎn)直就是一門藝術(shù)工作。不像其它的傳統(tǒng)的JS庫(kù)，提供了已經(jīng)“預(yù)設(shè)好”的直接可運(yùn)行的效果，相反，它由開發(fā)者做自己喜歡的。在這點(diǎn)，我比較喜歡適當(dāng)?shù)剡\(yùn)行一些動(dòng)畫和變換效果，越多越好。

按照這么地說，也會(huì)有個(gè)問題。動(dòng)畫API是非常“底層”的工作,而且需要您花時(shí)間去弄的，子類的構(gòu)建函數(shù)會(huì)又長(zhǎng)又啰嗦的。因此，在上一發(fā)布的版本中, 我把 YAHOO.ext.Element的動(dòng)畫效果盡量簡(jiǎn)單地調(diào)用。其實(shí)，在這個(gè)網(wǎng)站的大多數(shù)效果都是它完成的。

但如果我想做些較復(fù)雜的效果，該怎么辦？當(dāng)某個(gè)效果完成后，YUI能夠以函數(shù)的方式提供一個(gè)回調(diào)(callback).利用Callback你能夠?qū)⒍鄠€(gè)效果排隊(duì)來做出復(fù)雜的效果。唯一的問題是，在其函數(shù)內(nèi)，每一步效果的封裝好的，這樣，代碼起來就很復(fù)雜可怕了。另外一個(gè)問題是，當(dāng)你同一時(shí)內(nèi)多個(gè)元素發(fā)生動(dòng)畫效果的話，代碼會(huì)持續(xù)地隨著每個(gè)元素它擁有的回調(diào)函數(shù)的增長(zhǎng)而增長(zhǎng)。不得不說，YahooUI!在這方面，有點(diǎn)難以適用于開發(fā)，--尤其日漸常用這類效果。

新版的yui.ext包含了原本yui做動(dòng)畫所需的復(fù)雜代碼,甚至比你想的要簡(jiǎn)單。這里是功能列表：

*自動(dòng)調(diào)整動(dòng)畫順序 --回調(diào)函數(shù)不再有啦！

* 處理多個(gè)元素的動(dòng)畫更方便，--只要設(shè)置一下屬性。

* 對(duì)多個(gè)元素的動(dòng)畫效果，自動(dòng)同步和調(diào)整順序 --只要添加 Actors到一個(gè) Animator 就可以同步。

* 一些常用的預(yù)設(shè)效果(盡管yui不會(huì)引起內(nèi)存泄漏，但切勿替換、復(fù)制script.aculo.us那炫目的效果【譯者frank注：這里是反語，諷刺script.aculo.us會(huì)內(nèi)存泄漏)】

* 允許動(dòng)畫過程中執(zhí)行任何的函數(shù)。

*允許動(dòng)畫過程中調(diào)用自動(dòng)調(diào)整的同步函數(shù)。

*動(dòng)畫列表（一組的動(dòng)畫效果）可按需預(yù)定義和執(zhí)行

好,讓我們看看進(jìn)入代碼部分

以id為example的div新建一個(gè)actor對(duì)象。第三個(gè)參數(shù)真告訴它立即開始捕捉動(dòng)作（否則的話你必須調(diào)用startCature()）如果是false則是一個(gè)標(biāo)準(zhǔn)的元素對(duì)象，同時(shí)執(zhí)行所有調(diào)用。

var exdiv = new YAHOO.ext.Actor('example', null, true);

產(chǎn)生一個(gè)從上移動(dòng)下來的效果：

exdiv.moveIn('top');

播放動(dòng)畫：

exdiv.play();

另外一個(gè)范例：

這是范例的目的是在導(dǎo)航上(Jack's Blog)做交換效果

注意: Animators 可以支持一個(gè)或以上的元素的排序和同步動(dòng)畫

創(chuàng)建一個(gè)animator，包含兩個(gè)Actor (this.minbar and this.dockbar),然后開始捕捉他們的動(dòng)作。

var anim = new YAHOO.ext.Animator(this.minbar, this.dockbar); 
anim.startCapture();

開始動(dòng)畫：

this.dockbar.setX(-this.dockedWidth); 
this.dockbar.setWidth(this.dockedWidth); 
this.dockbar.setVisible(true);

beginSync() 告訴 animator 組合每個(gè)actions的動(dòng)作，同時(shí)播放這些動(dòng)畫。

anim.beginSync(); 
this.minbar.move('left', this.minbar.getWidth()+this.margin, true, .35); 
this.dockbar.move('right', this.dockedWidth+this.margin, true, .4, null, YAHOO.util.Easing.easeOut); 
anim.endSync();

播放完成后執(zhí)行這個(gè) callback.

anim.play(this.fireDocked);

更多復(fù)雜的例子

Click here to see what it does. Sorry, this depended on an old blog layout and no longer works. I won't go step by step but notice how the code flows like a normal javascript app? You would never know that there are over 10 different asynchronous animations being sequenced. Notice the async calls too - those are calling out to my navbar and telling it to dock or undock, which also performs more animations. The Animator here waits for those animations to complete before continuing. Dont' mind my code spacing, I am big fan of spacing code into logical blocks!2

var animator = new YAHOO.ext.Animator();
var cursor = new YAHOO.ext.Actor('cursor-img', animator);  
var resize = new YAHOO.ext.Actor('resize-img', animator); 
var click = new YAHOO.ext.Actor('click-img', animator);  
var splitter = new YAHOO.ext.Actor('splitter', animator);   
animator.startCapture();  
animator.addAsyncCall(Blog.navbar.undockDelegate, 1);  
cursor.show();  
cursor.moveTo(500,400);  
cursor.moveTo(20, getEl('navbar').getY()+10, true, .75); 
click.clearOpacity(); 
click.show();  
click.alignTo(cursor, 'tl', [-4, -4]); 
animator.pause(.5);  
click.hide(true, .7);    
animator.addAsyncCall(Blog.navbar.dockDelegate, 1);    
cursor.alignTo('splitter', 'tr', [0, +100], true, 1); 
resize.alignTo('splitter', 'tr', [-12, +100]);
animator.beginSync(); 
cursor.hide();  
resize.show();  
animator.endSync();  
splitter.highlight('#EEEEFF', '#C3DAF9', .3); 
splitter.highlight('#EEEEFF', '#C3DAF9', .3); 
animator.pause(2);
resize.hide(); 
cursor.show(); 
cursor.moveTo(-100, -100, true);   
animator.stopCapture();  
animator.play();

如果你喜歡做動(dòng)畫，那你一定會(huì)愛上yui，特別是現(xiàn)在做動(dòng)畫更容易了。

注意: 這些功能同樣包含在 YAHOO.ext.UpdateManager里面. 這是一個(gè)使用YAHOO.util.Connect 來AJAX更新元素的簡(jiǎn)單API ，基于事件驅(qū)動(dòng)使得YAHOO.util.Connect 代碼更簡(jiǎn)潔。最好的是，你親自去看看內(nèi)部的代碼因?yàn)槲椰F(xiàn)在實(shí)在太累了-不能再寫B(tài)LOGL了!