How to simply use YUI do JavaScript animation _yui. Ext Related

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

Yui Animation class is simply an art work. Unlike other traditional JS libraries, it provides a "preset", directly operational effect, rather, it is done by the developer who likes it. At this point, I prefer to run some animations and transform effects properly, the more the better.

In that way, there will be a problem. The animation API is very "low-level" work, and it takes you time to get it, and the subclass's build function will be long and verbose. So, in the previous release, I called the YAHOO.ext.Element animation as simple as possible. In fact, most of the results on this site are done by it.

But what if I want to do something more complicated? When an effect is completed, Yui can provide a callback (callback) in the form of a function. Using callback you can queue multiple effects to make complex effects. The only problem is that within the function, each step of the effect is encapsulated well, so the code is complicated and scary. Another problem is that when you animate multiple elements in a moment, the code continues to grow with the growth of the callback function that each element has. It has to be said that yahooui! in this regard is somewhat difficult to apply to development, especially in the increasingly common use of such effects.

The new version of the Yui.ext contains the original Yui to do animation required by the complex code, or even more simple than you think. Here is the list of features:

* Auto-adjust Animation order-callback function no longer have!

* It's more convenient to handle animations for multiple elements-just set the properties.

* Animation effects on multiple elements, automatic synchronization and adjustment order-as long as the addition of actors to a animator can be synchronized.

* Some commonly used preset effects (although Yui does not cause memory leaks, but do not replace, copy script.aculo.us that dazzling effect "translator Frank Note: Here is irony, irony script.aculo.us will leak memory)"

* Allow any function to be executed during animation.

* Allows automatic tuning of synchronization functions to be invoked during animation.

* Animation list (a set of animation effects) can be predefined and executed on demand

Okay, let's take a look into the code section

Create a new actor object with a div with ID example. The third argument really tells it to start capturing the action immediately (otherwise you must call Startcature ()) If False is a standard element object, and all calls are executed.

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

Produces an effect that moves from top to down:

Exdiv.movein (' top ');

Play Animation:

Exdiv.play ();

Another example:

This is an example of the purpose of the navigation (Jack ' s Blog) to do the exchange effect

Note: Animators can support sorting and synchronization animations for one or more elements

Create a animator that contains two actor (This.minbar and This.dockbar), and then start capturing their actions.

Anim.startcapture ();

Start Animation:

This.dockbar.setVisible (TRUE);

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

Anim.endsync ();

Perform this callback when playback is complete.

Anim.play (this.firedocked);

More complex examples

Click here to the what it does. Sorry, this is depended on a old blog layout and no longerworks. I won ' t go step but notice the code flows like a normal JavaScript app? You would never know this there are over ten different asynchronous animations being sequenced. Notice The Async calls Too-those are calling out I navbar and telling it to the dock or undock, which also Animations. The animator here is waits for those animations to complete before. Dont ' Mind My Code spacing, I am big fan The 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 (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 to do animation, then you will fall in love with Yui, especially now make animation easier.

Note: These features are also included in YAHOO.ext.UpdateManager. This is a simple API that uses YAHOO.util.Connect to update elements in Ajax, event-based driver makes YAHOO.util.Connect code simpler. Best of all, you go and see the internal code yourself because I'm so tired now-no more writing BLOGL!