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 It's 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 panel's 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:

There'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.

There has been a lot of interesting news from the second half of January. Here are some of the stories that resonated with me:

continue reading article…

In the article, Using Ant to Consolidate CSS and JavaScript, we discussed how to use Ant for consolidating and compressing JavaScript and CSS. Today we will take that a step further by adding JSLint JavaScript validation to the process. JSLint is a code quality tool that checks your code for common JavaScript errors, best practices, and optimizations.

Keep in mind that using JSLint will hurt your feelings, so only read on if you are either brave or foolhardy.

continue reading article…

Today's article is inspired by the Radial Menu found in many of Bioware's RPGs, such as Dragon Age. At the press of a button, the menu appears on the screen (usually pausing the game), and allows players to choose common commands. The same type of menu is possible on the web, and may even be more useful than the traditional navigation. We will use JavaScript, CSS, and YUI3 to build flexible Radial Menu widget that appears in the center of the page and responds to end-user clicks.

continue reading article…

Flash in JavaScript

Tobias Schneider has written an open source Flash runtime written in JavaScript and SVG. Check out these Demo. The full source is available on GitHub.

Inheritance Patterns

continue reading article…