如何簡單地用YUI做JavaScript動畫

更新時間：2007年03月10日 00:00:00 作者：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

產(chǎn)生一個從上移動下來的效果：

exdiv.moveIn('top');

播放動畫：

exdiv.play();

另外一個范例：

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

注意: Animators 可以支持一個或以上的元素的排序和同步動畫

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

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

開始動畫：

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

beginSync() 告訴 animator 組合每個actions的動作，同時播放這些動畫。

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í)行這個 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();

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

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