如何簡單地用YUI做JavaScript動畫

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

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

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

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

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

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

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

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

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

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

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

*允許動畫過程中調用自動調整的同步函數。

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

好,讓我們看看進入代碼部分

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

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

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

exdiv.moveIn('top');

播放動畫：

exdiv.play();

另外一個范例：

這是范例的目的是在導航上(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);

更多復雜的例子

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 代碼更簡潔。最好的是，你親自去看看內部的代碼因為我現在實在太累了-不能再寫B(tài)LOGL了!