How to Use YUI for JavaScript Animation

Address: http://www.jackslocum.com/blog/2006/08/24/javascript-animations-with-yahoo-ui-made-easy/

YUI animation is an art work. Unlike other traditional JS libraries, they provide direct and runable effects that have been "preset". On the contrary, they are preferred by developers. At this point, I prefer to run some animations and transform effects as appropriate. The more I want, the better.

According to this, there will also be a problem. The animation API is very "bottom-layer" Work and requires you to spend time on it. The sub-class construction function will be long and lengthy. Therefore, in the previous release, I tried to call the animation effect of YAHOO. ext. Element as simple as possible. In fact, most of the results on this website are completed.

But what if I want to do something more complex? After an effect is completed, YUI can provide a callback function. With Callback, You can queue multiple effects to make complex effects. The only problem is that each step of the function is well encapsulated, and the code is complicated and terrible. Another problem is that when multiple elements are animated at the same time, the Code continues to grow with the growth of the callback functions owned by each element. I have to say, YahooUI! In this regard, it is a bit difficult to apply to development, especially the increasing use of such effects.

The new version of yui. ext contains the complex code required for the original yui animation, which is even simpler than you think. Here is the function list:

* Automatically adjust the animation sequence-callback functions are no longer available!

* It is easier to process animations with multiple elements. You only need to set attributes. * Automatically synchronize and adjust the order of the animation effects of multiple elements. You only need to add Actors to an animation or to synchronize them. * Some Common preset effects (although yui does not cause memory leakage, do not replace or copy scripts. aculo. us's dazzling effect [Translator's frank Note: This is a Spanish, ironic script. aculo. us Memory leakage)] * allows any function to be executed during the animation process. * The auto-adjusted synchronous function can be called during the animation process.

* The animation list (a set of animation effects) can be predefined and executed as needed.

Okay. Let's see the code section.Create an actor object using the div whose id is example. The third parameter tells it to start capturing immediately (otherwise, you must call startCature (). If it is false, it is a standard element object and all calls are executed at the same time.

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

The following figure shows the result of moving from top to bottom:

exdiv.moveIn('top');

Play an animation:

exdiv.play();

Another example:The purpose of this example is to exchange results on the navigation (Jack's Blog ). Note: Animators supports sorting and synchronous animation of one or more elements.Create an animator that contains two actors (this. minbar and this.doc kbar) and start capturing their actions.

var anim = new YAHOO.ext.Animator(this.minbar, this.dockbar); 
anim.startCapture();

Start Animation:

this.dockbar.setX(-this.dockedWidth); 
this.dockbar.setWidth(this.dockedWidth); 
this.dockbar.setVisible(true);

BeginSync () tells animator to combine the actions of each actions and play these animations at the same time.

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();

Run the callback command after the playback is complete.

anim.play(this.fireDocked);

More complex examplesClick 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 wowould never know that there are over 10 different asynchronous animations being sequenced. notice the async CILS 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();

If you like animation, you will surely fall in love with yui, especially now it is easier to make animation. Note: These functions are also included in YAHOO. ext. in UpdateManager. this is an example of using YAHOO. util. connect is a simple API for AJAX to update elements. Based on event-driven, YAHOO. util. connect code is simpler. The best thing is, you can check the internal code yourself because I am so tired now-I can't write BLOGL any more!