原文地址：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做动画所需的复杂代码,甚至比你想的要简单。这里是功能列表：
*自动调整动画顺序 --回调函数不再有啦！
*动画列表（一组的动画效果）可按需预定义和执行
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();
