Radial Menu Animation

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 radiate or 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 rotateanimType; 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.