Customizing component animations

Several components, such as the Accordion, ComboBox, and Tree components, provide animation to demonstrate the transition between component states--for example, when switching between Accordion children, expanding the ComboBox drop-down list, and expanding or collapsing Tree folders. Additionally, components provide animation related to the selection and deselection of an item, such as rows in a list.

You can control aspects of these animations through the following styles:

Animation style	Description
`openDuration`	The duration of the transition for open easing in Accordion, ComboBox, and Tree components, in milliseconds. The default value is 250.
`openEasing`	A reference to a tweening function that controls the state animation in the Accordion, ComboBox, and Tree components. The default equation uses a sine in/out formula.
`popupDuration`	The duration of the transition as a menu opens in the Menu component, in milliseconds. The default value is 150. Note, however, that the animation always uses the default sine in/out equation.
`selectionDuration`	The duration of the transition in ComboBox, DataGrid, List, and Tree components from a normal to selected state or back from selected to normal, in milliseconds. The default value is 200.
`selectionEasing`	A reference to a tweening function that controls the selection animation in ComboBox, DataGrid, List, and Tree components. This style applies only for the transition from a normal to a selected state. The default equation uses a sine in/out formula.

Animation style

Description

openDuration

The duration of the transition for open easing in Accordion, ComboBox, and Tree components, in milliseconds. The default value is 250.

openEasing

A reference to a tweening function that controls the state animation in the Accordion, ComboBox, and Tree components. The default equation uses a sine in/out formula.

popupDuration

The duration of the transition as a menu opens in the Menu component, in milliseconds. The default value is 150. Note, however, that the animation always uses the default sine in/out equation.

selectionDuration

The duration of the transition in ComboBox, DataGrid, List, and Tree components from a normal to selected state or back from selected to normal, in milliseconds. The default value is 200.

selectionEasing

A reference to a tweening function that controls the selection animation in ComboBox, DataGrid, List, and Tree components. This style applies only for the transition from a normal to a selected state. The default equation uses a sine in/out formula.

The mx.transitions.easing package provides six classes to control easing:

Easing class	Description
Back	Extends beyond the transition range at one or both ends one time to provide a slight overflow effect.
Bounce	Provides a bouncing effect entirely within the transition range at one or both ends. The number of bounces is related to the duration: longer durations produce more bounces.
Elastic	Provides an elastic effect that falls outside the transition range at one or both ends. The amount of elasticity is unaffected by the duration.
None	Provides an equal movement from start to end with no effects, slowing, or speeding. This transition is also commonly referred to as a linear transition.
Regular	Provides for slower movement at one or both ends for a speeding-up effect, a slowing-down effect, or both.
Strong	Provides for much slower movement at one or both ends. This effect is similar to Regular but is more pronounced.

Easing class

Description

Back

Extends beyond the transition range at one or both ends one time to provide a slight overflow effect.

Bounce

Provides a bouncing effect entirely within the transition range at one or both ends. The number of bounces is related to the duration: longer durations produce more bounces.

Elastic

Provides an elastic effect that falls outside the transition range at one or both ends. The amount of elasticity is unaffected by the duration.

None

Provides an equal movement from start to end with no effects, slowing, or speeding. This transition is also commonly referred to as a linear transition.

Regular

Provides for slower movement at one or both ends for a speeding-up effect, a slowing-down effect, or both.

Strong

Provides for much slower movement at one or both ends. This effect is similar to Regular but is more pronounced.

Each of the classes in the mx.transitions.easing package provides the following three easing methods:

Easing method	Description
`easeIn`	Provides the easing effect at the beginning of the transition.
`easeOut`	Provides the easing effect at the end of the transition.
`easeInOut`	Provides the easing effect at the beginning and end of the transition.

Easing method

Description

easeIn

Provides the easing effect at the beginning of the transition.

easeOut

Provides the easing effect at the end of the transition.

easeInOut

Provides the easing effect at the beginning and end of the transition.

The following animation demonstrates the different easing classes and methods. As you use the radio buttons to choose a class, method, and duration, the ball jumps from left to right in response to your settings. You can also click the Animate button to reanimate the ball using the current selection.

Because the easing methods are static methods of the easing classes, you never need to instantiate the easing classes. The methods are used in calls to setStyle(), as in the following example.

import mx.transitions.easing.*;
trace("_global.styles.Accordion = " + _global.styles.Accordion);
_global.styles.Accordion.setStyle("openDuration", 1500);
_global.styles.Accordion.setStyle("openEasing", Bounce.easeOut);

NOTE

The default equation used by all transitions is not available in the easing classes listed above. To specify that a component should use the default easing method after another easing method has been specified, call setStyle("openEasing", null).

For more information see "Applying easing methods to components" in the ActionScript 2.0 Components Language Reference.