Using an easing function

You can change the speed of an animation by defining an easing function for an effect. With easing, you can create a more realistic rate of acceleration and deceleration. You can also use an easing function to create a bounce effect or control other types of motion.

Flex supplies predefined easing functions in the mx.effects.easing package. This package includes functions for the most common types of easing, including Bounce, Linear, and Sine easing. For more information on using these functions, see the Adobe Flex Language Reference.

The following code shows the basic format of an easing function:

function myEasingFunction(t:Number, b:Number, c:Number, d:Number):Number {
    ...
}

You specify the following arguments of an easing function:

t specifies time.
b specifies the initial position of a component.
c specifies the total change in position of the component.
d specifies the duration of the effect, in milliseconds.

Using a Flex easing function

You specify an easing function to a component by passing a reference to the function to a component property. You pass only the name of the easing function; Flex automatically sets the values for the arguments of the easing function.

All tween effects, meaning effect classes that are child classes of the TweenEffect class, support the easingFunction property, which lets you specify an easing function to the effect. Mask effects--those effect classes that are child classes of the MaskEffect class--also support easing functions. Other components support easing functions as well. For example, the Accordion and Tree components let you use the openEasingFunction style property to specify an easing function, and the ComboBox component supports a closeEasingFunction style property.

For example, you can specify the mx.effects.easing.Bounce.easeOut() method to the Accordion container using the openEasingFunction property, as the following code shows.

<?xml version="1.0"?>
<!-- behaviors\EasingFuncExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    height="550">

    <mx:Script>
        import mx.effects.easing.*;
    </mx:Script>

    <mx:Accordion 
        openEasingFunction="{Bounce.easeOut}" 
        openDuration="2000">
        <mx:VBox label="Pane 1" width="400" height="400"/>
        <mx:VBox label="Pane 2" width="400" height="400"/> 
    </mx:Accordion>
</mx:Application>
The executing SWF file for the previous example is shown below:

Creating a custom easing function

In the following example, you create a custom easing function that creates a bounce motion when combined with the Flex Move effect:

<?xml version="1.0"?>
<!-- behaviors\Easing.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
 
    <mx:Script>
        <![CDATA[
            private function myEasingFunction(t:Number, b:Number, 
                    c:Number, d:Number):Number {
              if ((t /= d) < (1 / 2.75)) {
                  return c * (7.5625 * t * t) + b;
              }
              else if (t < (2 / 2.75)) {
                  return c * (7.5625 * (t-=(1.5/2.75)) * t + .75) + b;
              }
              else if (t < (2.5 / 2.75)) {
                  return c * (7.5625 * (t-=(2.25/2.75)) * t + .9375) + b;
              }
              else {
                  return c * (7.5625 * (t-=(2.625/2.75)) * t + .984375) + b;
              }
            };
        ]]>
    </mx:Script>

    <mx:Move id="moveLeftShow" 
        xFrom="600" xTo="0" yTo="0" 
        duration="3000" 
        easingFunction="myEasingFunction"/>
    <mx:Move id="moveRightHide" 
        xFrom="0" xTo="600" 
        duration="3000" 
        easingFunction="myEasingFunction"/>    
    
    <mx:LinkBar dataProvider="myVS"/>
    <mx:ViewStack id="myVS" borderStyle="solid">
        <mx:Canvas id="Canvas0" label="Canvas0" 
            creationCompleteEffect="{moveLeftShow}" 
            showEffect="{moveLeftShow}"
            hideEffect="{moveRightHide}" >
                <mx:Box height="300" width="600" backgroundColor="#00FF00">
                    <mx:Label text="Screen 0" color="#FFFFFF" fontSize="40"/>
                </mx:Box>
        </mx:Canvas>            
        <mx:Canvas id="Canvas1" label="Canvas1" 
            showEffect="{moveLeftShow}" hideEffect="{moveRightHide}" >
                <mx:Box height="300" width="600" backgroundColor="#0033CC">
                    <mx:Label text="Screen 1" color="#FFFFFF" fontSize="40"/>
                </mx:Box>
            </mx:Canvas>
    </mx:ViewStack>  
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, you use the custom effects in the showEffect and hideEffect properties of the children of a ViewStack container. When you click a label in the LinkBar control, the corresponding child of the ViewStack container slides in from the right, and bounces to a stop against the left margin of the ViewStack container, while the previously visible child of the ViewStack container slides off to the right.

The custom effect for the showEffect property is only triggered when the child's visibility changes from false to true. Therefore, the first child of the ViewStack container also includes a creationCompleteEffect property. This is necessary to trigger the effect when Flex first creates the component. If you omit the creationCompleteEffect property, you do not see the moveLeftShow effect when the application starts.

Adobe Flex 3 Help

Using an easing function