Changing the Accordion container’s easing duration and easing functions

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.

Tagged as: easing, openDuration, openEasingFunction