如何簡(jiǎn)單地用YUI做JavaScript動(dòng)畫
原文地址: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ù)不再有啦!
*動(dòng)畫列表(一組的動(dòng)畫效果)可按需預(yù)定義和執(zhí)行
var exdiv = new YAHOO.ext.Actor('example', null, true);
exdiv.moveIn('top');
exdiv.play();
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);
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();
anim.play(this.fireDocked);
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();
相關(guān)文章
對(duì)YUI擴(kuò)展的Gird組件 Part-1
對(duì)YUI擴(kuò)展的Gird組件 Part-1...2007-03-03javascript 放大鏡 v1.0 基于Yui2 實(shí)現(xiàn)的放大鏡效果
javascript 放大鏡 v1.0 基于Yui2 實(shí)現(xiàn)的放大鏡效果代碼。2010-03-03Ext.FormPanel 提交和 Ext.Ajax.request 異步提交函數(shù)的區(qū)別
Ext.FormPanel 提交和 Ext.Ajax.request 異步提交函數(shù)的區(qū)別小結(jié),需要的朋友可以參考下。2009-11-11學(xué)習(xí)YUI.Ext 第四天--對(duì)話框Dialog的使用
學(xué)習(xí)YUI.Ext 第四天--對(duì)話框Dialog的使用...2007-03-03可縮放Reloaded-一個(gè)針對(duì)可縮放元素的復(fù)用組件
可縮放Reloaded-一個(gè)針對(duì)可縮放元素的復(fù)用組件...2007-03-03ext checkboxgroup 回填數(shù)據(jù)解決
解決checkboxgroup回填數(shù)據(jù)問題的實(shí)現(xiàn)代碼2009-08-08