actionscript 3 - Mover efectos en TileList en Flex 3

actionscript-3 flex3

Question

Le estoy proporcionando el código de muestra que tengo hasta ahora. Lo que quiero hacer es cuando hago clic en el botón Abajo Tilelist desplazo lentamente y cambia los datos. aunque los datos cambian al hacer clic en el botón hacia abajo pero no se muestra ningún efecto. He buscado mucho en la red pero no puedo encontrar una mejor manera de hacerlo. Si es posible, por favor, dale la mejor manera para eso.

Aquí está mi código de muestra que he hecho hasta ahora

<?xml version="1.0"?>

<mx:Sequence id="dataChangeEffectSequence">
    <mx:Move duration="1500" easingFunction="{Elastic.easeOut}" perElementOffset="20"/>
</mx:Sequence>

<mx:Script>
    <![CDATA[
        import mx.effects.easing.Elastic;
        import mx.controls.Alert;
        import mx.events.ScrollEvent;

        private var arrImage:Array = [
            {source:"Images/1.png",tooltip:"1"},
            {source:"Images/2.png",tooltip:"2"},
            {source:"Images/3.png",tooltip:"3"},
            {source:"Images/4.png",tooltip:"4"},
            {source:"Images/5.png",tooltip:"5"},
            {source:"Images/6.png",tooltip:"6"},
            {source:"Images/7.png",tooltip:"7"},
            {source:"Images/8.png",tooltip:"8"},
            {source:"Images/9.png",tooltip:"9"},
            {source:"Images/10.png",tooltip:"10"}];

        public function onInit():void
        {
            tileList.dataProvider = arrImage;
        }

        public function btnUP_click():void
        {
            var scrollPosition:int = tileList.verticalScrollPosition - 1;

            if(scrollPosition >= 0)
            {
                tileList.verticalScrollPosition = scrollPosition;
            }
            else
            {
                tileList.verticalScrollPosition = 0;
            }
        }

        public function btnDown_click():void
        {
            var scrollPosition:int = tileList.verticalScrollPosition + 1;

            if(scrollPosition <= tileList.maxVerticalScrollPosition)
            {
                tileList.verticalScrollPosition = scrollPosition;
            }               
        }

    ]]>
</mx:Script>

<mx:Button width="100" label="UP" id="btnUP" click="{btnUP_click();}" />

<mx:TileList id="tileList" dataProvider="{arrImage}" columnCount="1" columnWidth="100"
    useRollOver="false" selectable="false" backgroundAlpha="0" borderStyle="none" 
    rowHeight="65" verticalScrollPolicy="off" horizontalScrollPolicy="off"
    itemsChangeEffect="{dataChangeEffectSequence}" >
    <mx:itemRenderer>
        <mx:Component>
            <mx:VBox width="100%" height="100%" horizontalAlign="center" verticalGap="0"
                verticalAlign="middle" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                <mx:Script>
                    <![CDATA[
                        import mx.controls.Alert;
                        override public function set data(value:Object):void
                        {
                            if(value !=null)
                            {
                                super.data = value;
                                if(img !=null)
                                {
                                    img.source = data.source;
                                    img.toolTip = data.tooltip;
                                }
                            }
                        }
                    ]]>
                </mx:Script>
                <mx:Image id="img" showEffect="{outerDocument.dataChangeEffectSequence}" />
            </mx:VBox>
        </mx:Component>
    </mx:itemRenderer>
</mx:TileList>

<mx:Button width="100" label="DOWN" id="btnDown" click="{btnDown_click();}" />

</mx:Application>

Gracias por adelantado..

Answer 1

Puede usar componentes de chispa como List y establecer useVirtualLayout como verdadero.

El problema con su código es que cada objeto que se utiliza se crea y se muestra cuando se actualiza el proveedor de datos. Con useVirtualLayout establecido en verdadero, solo se crean los elementos mostrados y se reciclan cuando se desplaza. A continuación, puede escuchar el evento dataChange de su dataChange para iniciar la transición.

Answer 2

Coloque la TileList dentro de un contenedor (como Canvas o VBox) y fuerce a que sea la altura máxima de todos los elementos (si tiene variableRowHeight, podría ser un poco complejo). Luego maneje el desplazamiento en el VBox, no en TileList.

También tenga en cuenta que VBox tiene una gran sobrecarga como itemRenderer. Es posible que desee considerar simplemente poner la imagen allí. Tiene propiedades horizontalAlign y verticalAlign.