如何簡單地用YUI做JavaScript動畫
原文地址:http://www.jackslocum.com/blog/2006/08/24/javascript-animations-with-yahoo-ui-made-easy/
YUI的動畫類簡直就是一門藝術工作。不像其它的傳統(tǒng)的JS庫,提供了已經(jīng)“預設好”的直接可運行的效果,相反,它由開發(fā)者做自己喜歡的。在這點,我比較喜歡適當?shù)剡\行一些動畫和變換效果,越多越好。
按照這么地說,也會有個問題。動畫API是非?!暗讓印钡墓ぷ?而且需要您花時間去弄的,子類的構建函數(shù)會又長又啰嗦的。因此,在上一發(fā)布的版本中, 我把 YAHOO.ext.Element的動畫效果盡量簡單地調(diào)用。其實,在這個網(wǎng)站的大多數(shù)效果都是它完成的。但如果我想做些較復雜的效果,該怎么辦?當某個效果完成后,YUI能夠以函數(shù)的方式提供一個回調(diào)(callback).利用Callback你能夠?qū)⒍鄠€效果排隊來做出復雜的效果。唯一的問題是,在其函數(shù)內(nèi),每一步效果的封裝好的,這樣,代碼起來就很復雜可怕了。另外一個問題是,當你同一時內(nèi)多個元素發(fā)生動畫效果的話,代碼會持續(xù)地隨著每個元素它擁有的回調(diào)函數(shù)的增長而增長。不得不說,YahooUI!在這方面,有點難以適用于開發(fā),--尤其日漸常用這類效果。
新版的yui.ext包含了原本yui做動畫所需的復雜代碼,甚至比你想的要簡單。這里是功能列表:
*自動調(diào)整動畫順序 --回調(diào)函數(shù)不再有啦!
*動畫列表(一組的動畫效果)可按需預定義和執(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();
相關文章
javascript 放大鏡 v1.0 基于Yui2 實現(xiàn)的放大鏡效果
javascript 放大鏡 v1.0 基于Yui2 實現(xiàn)的放大鏡效果代碼。2010-03-03Ext.FormPanel 提交和 Ext.Ajax.request 異步提交函數(shù)的區(qū)別
Ext.FormPanel 提交和 Ext.Ajax.request 異步提交函數(shù)的區(qū)別小結(jié),需要的朋友可以參考下。2009-11-11ext checkboxgroup 回填數(shù)據(jù)解決
解決checkboxgroup回填數(shù)據(jù)問題的實現(xiàn)代碼2009-08-08