如何簡單地用YUI做JavaScript動畫

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

YUI的動畫類簡直就是一門藝術工作。不像其它的傳統的JS庫，提供了已經“預設好”的直接可啟動並執行效果，相反，它由開發人員做自己喜歡的。在這點，我比較喜歡適當地運行一些動畫和變換效果，越多越好。

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

但如果我想做些較複雜的效果，該怎麼辦？當某個效果完成後，YUI能夠以函數的方式提供一個回調(callback).利用Callback你能夠將多個效果排隊來做出複雜的效果。唯一的問題是，在其函數內，每一步效果的封裝好的，這樣，代碼起來就很複雜可怕了。另外一個問題是，當你同一時內多個元素髮生動畫效果的話，代碼會持續地隨著每個元素它擁有的回呼函數的增長而增長。不得不說，YahooUI!在這方面，有點難以適用於開發，--尤其日漸常用這類效果。

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

*自動調整動畫順序 --回呼函數不再有啦！

* 處理多個元素的動畫更方便，--只要設定一下屬性。* 對多個元素的動畫效果，自動同步和調整順序 --只要添加 Actors到一個 Animator 就可以同步。 * 一些常用的預設效果(儘管yui不會引起記憶體流失，但切勿替換、複製script.aculo.us那炫目的效果【 譯者frank註：這裡是反語，諷刺script.aculo.us會記憶體流失)】* 允許動畫過程中執行任何的函數。*允許動畫過程中調用自動調整的同步函數。

*動畫列表（一組的動畫效果）可按需預定義和執行

好,讓我們看看進入代碼部分以id為example的div建立一個actor對象。第三個參數真告訴它立即開始捕捉動作（否則的話你必須調用startCature()） 如果是false則是一個標準的元素對象，同時執行所有調用。

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

產生一個從上移動下來的效果：

exdiv.moveIn('top');

播放動畫：

exdiv.play();

另外一個範例：這是範例的目的是在導航上(Jack's Blog)做交換效果 注意: Animators 可以支援一個或以上的元素的排序和同步動畫建立一個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();

播放完成後執行這個 callback.

anim.play(this.fireDocked);

更多複雜的例子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，特別是現在做動畫更容易了。 注意: 這些功能同樣包含在 YAHOO.ext.UpdateManager裡面. 這是一個使用YAHOO.util.Connect 來AJAX更新元素的簡單API ，基於事件驅動使得YAHOO.util.Connect 代碼更簡潔。 最好的是，你親自去看看內部的代碼因為我現在實在太累了-不能再寫BLOGL了!