This article will discuss an animation plugin for the Radial Menu widget. It was written as a plugin, both to better understand the plugin infrastructure of YUI 3, and because not all developers will want animation in all cases. There are two animations, one that radiates and the another that rotates out (and in) from (and to) the center.
Setup…
First add the animation plugin to your YUI 3 modules list:
YUI({ /* … */ modules: { /* … */gallery-radial-menu-anim: { fullpath:http://yui-ext-mvc.googlecode.com/svn/trunk/assets/js/yahoo-3-ext/RadialMenuAnim.js, requires: [plugin,anim,gallery-radial-menu], optional: [], supersedes: [] }, } });
How Its Done…
Plugin default animation:
radioMenuInstance.plugin(Y.RadialMenuAnim, {});
Plugin a configured animation:
radioMenuInstance.plugin(Y.RadialMenuAnim, { animType: rotate, easingOut: Y.Easing.easeOut, easingIn: Y.Easing.easeIn });
Change plugin variables on the fly:
radioMenuInstance.radialMenuAnim.set(animType,radiate);
How It Works…
The YUI 3 widget plugin system, augments the radialMenuInstance
by listening for the execution of the hide
, show
, and syncUI
functions. When this happens, RadialMenuAnim
prevents the default behavior of those functions, and implements its own version.
To animate, the hijacked hide
and show
functions either move along a straight line (radiate animation) or they follow a 90 degree rotating path while moving along the radius (rotate animation), from the center to the panels position on the circle (or the reverse). The YUI curve
animation is use for the rotation animation, see the Curve Animation Example for more information.
There are 5 properties that can be defined on the RadialMenuAnim plugin:
Name: | Description: |
---|---|
animType: | A string value that is the type of animation to use, either radiateor rotate; defaults to radiate |
duration: | An integer value that is the duration for the animation; defaults to 1 second |
easingIn: | A Y.Easing function for the hide animation; defaults to Y.Easing.elasticIn |
easingOut: | A Y.Easing function for the show animation; defaults to Y.Easing.elasticOut |
rotation: | An integer value that is the number of degrees to rotate by when using the rotate animType; defaults to 90 |
There&rsquot;s More…
Because some browsers suck (ahem… IE), and I needed the capability for my testing page, there are two functions that can be used to turn the animation plugin on and off:// turn plugin on radioMenuInstance.enable(); // turn plugin off radioMenuInstance.disable();
The plugin is enabled by default.
See also
The article, Radial Menu, where this widget was first introduced.The test page, Radial Menu Test, where you can play with the animations yourself.