Flex Examples

The following example shows how you can control the easing duration and easing function that the Accordion container uses when changing the visible child container.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/27/changing-the-accordion-containers-easing-duration-and-easing-functions/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import mx.effects.easing.*;

            private function init():void {
                /**    Back */
                arrColl.addItem({label:"Back.easeIn", func:Back.easeIn});
                arrColl.addItem({label:"Back.easeOut", func:Back.easeOut});
                arrColl.addItem({label:"Back.easeInOut", func:Back.easeInOut});
                /** Bounce */
                arrColl.addItem({label:"Bounce.easeIn", func:Bounce.easeIn});
                arrColl.addItem({label:"Bounce.easeOut", func:Bounce.easeOut});
                arrColl.addItem({label:"Bounce.easeInOut", func:Bounce.easeInOut});
                /** Circular */
                arrColl.addItem({label:"Circular.easeIn", func:Circular.easeIn});
                arrColl.addItem({label:"Circular.easeOut", func:Circular.easeOut});
                arrColl.addItem({label:"Circular.easeInOut", func:Circular.easeInOut});
                /** Cubic */
                arrColl.addItem({label:"Cubic.easeIn", func:Cubic.easeIn});
                arrColl.addItem({label:"Cubic.easeOut", func:Cubic.easeOut});
                arrColl.addItem({label:"Cubic.easeInOut", func:Cubic.easeInOut});
                /** Elastic */
                arrColl.addItem({label:"Elastic.easeIn", func:Elastic.easeIn});
                arrColl.addItem({label:"Elastic.easeOut", func:Elastic.easeOut});
                arrColl.addItem({label:"Elastic.easeInOut", func:Elastic.easeInOut});
                /** Exponential */
                arrColl.addItem({label:"Exponential.easeIn", func:Exponential.easeIn});
                arrColl.addItem({label:"Exponential.easeOut", func:Exponential.easeOut});
                arrColl.addItem({label:"Exponential.easeInOut", func:Exponential.easeInOut});
                /** Linear */
                arrColl.addItem({label:"Linear.easeIn", func:Linear.easeIn});
                arrColl.addItem({label:"Linear.easeOut", func:Linear.easeOut});
                arrColl.addItem({label:"Linear.easeInOut", func:Linear.easeInOut});
                /** Quadratic */
                arrColl.addItem({label:"Quadratic.easeIn", func:Quadratic.easeIn});
                arrColl.addItem({label:"Quadratic.easeOut", func:Quadratic.easeOut});
                arrColl.addItem({label:"Quadratic.easeInOut", func:Quadratic.easeInOut});
                /** Quartic */
                arrColl.addItem({label:"Quartic.easeIn", func:Quartic.easeIn});
                arrColl.addItem({label:"Quartic.easeOut", func:Quartic.easeOut});
                arrColl.addItem({label:"Quartic.easeInOut", func:Quartic.easeInOut});
                /** Quintic */
                arrColl.addItem({label:"Quintic.easeIn", func:Quintic.easeIn});
                arrColl.addItem({label:"Quintic.easeOut", func:Quintic.easeOut});
                arrColl.addItem({label:"Quintic.easeInOut", func:Quintic.easeInOut});
                /** Sine */
                arrColl.addItem({label:"Sine.easeIn", func:Sine.easeIn});
                arrColl.addItem({label:"Sine.easeOut", func:Sine.easeOut});
                arrColl.addItem({label:"Sine.easeInOut", func:Sine.easeInOut});
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="openEasingFunction:" />
        <mx:ComboBox id="openEasingFunc"
                dataProvider="{arrColl}" />

        <mx:Label text="openDuration:" />
        <mx:HSlider id="openDur"
                minimum="100"
                maximum="1500"
                value="1000"
                liveDragging="true"
                snapInterval="100"
                tickInterval="100"
                dataTipPrecision="0" />
    </mx:ApplicationControlBar>

    <mx:Accordion width="400" height="120"
            openDuration="{openDur.value}"
            openEasingFunction="{openEasingFunc.selectedItem.func}">
        <mx:VBox id="child1" label="Child 1" />
        <mx:VBox id="child2" label="Child 2" />
        <mx:VBox id="child3" label="Child 3" />
    </mx:Accordion>

</mx:Application>

View source is enabled in the following example.