2 Replies Latest reply on Apr 14, 2010 11:54 AM by injpix

    How to animate a Spark List's dataGroup when user traverses thru items?

    injpix Level 3

      How can I have the dataGroup have an effect when the user  traverses thru the List?

       

      I came across this example which is using a HGroup:

      http://blog.flexexamples.com/2009/11/11/creating-an-animated-transition-when-scr  olling-through-items-in-a-spark-hgroup-container/

       

      ...which is  the exact effect I would like with a List.

        • 1. Re: How to animate a Spark List's dataGroup when user traverses thru items?
          Shongrunden Adobe Employee

          Taking the HGroup example you posted you can do something similar with a spark List by animating the scroll position on the layout:

           

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark">
              <fx:Script>
                  <![CDATA[
                      import spark.core.NavigationUnit;
                     
                      protected function scrollToThere(dir:int):void {
                          var value:Number = listLayout.getHorizontalScrollPositionDelta(dir);
                          if (value != 0) {
                              pth.valueBy = value;
                              anim.play();
                          }
                      }
                  ]]>
              </fx:Script>
             
              <fx:Declarations>
                  <s:Animate id="anim" target="{listLayout}" duration="500">
                      <s:motionPaths>
                          <s:SimpleMotionPath id="pth" property="horizontalScrollPosition" />
                      </s:motionPaths>
                  </s:Animate>
              </fx:Declarations>
             
              <s:Panel title="List horizontalScrollPosition test"
                       horizontalCenter="0" verticalCenter="0">
                  <s:layout>
                      <s:HorizontalLayout verticalAlign="middle" />
                  </s:layout>
                  <s:Button label="&lt;" click="scrollToThere(NavigationUnit.PAGE_LEFT);" width="30" />
                 
                  <s:List id="list1" height="100" width="300" typicalItem="xxxxxx">
                      <s:layout>
                          <s:HorizontalLayout id="listLayout" />
                      </s:layout>
                      <s:itemRenderer>
                          <fx:Component>
                              <s:ItemRenderer width="100" height="50">
                                  <s:Label text="{data}" verticalCenter="0" />
                              </s:ItemRenderer>
                          </fx:Component>
                      </s:itemRenderer>
                      <s:dataProvider>
                          <s:ArrayList>
                              <fx:String>one</fx:String>
                              <fx:String>two</fx:String>
                              <fx:String>three</fx:String>
                              <fx:String>four</fx:String>
                              <fx:String>five</fx:String>
                              <fx:String>six</fx:String>
                              <fx:String>seven</fx:String>
                              <fx:String>eight</fx:String>
                              <fx:String>nine</fx:String>
                              <fx:String>ten</fx:String>
                              <fx:String>eleven</fx:String>
                          </s:ArrayList>
                      </s:dataProvider>
                  </s:List>
                  <s:Button label="&gt;" click="scrollToThere(NavigationUnit.PAGE_RIGHT);" width="30" />
              </s:Panel>
             
          </s:Application>
          • 2. Re: How to animate a Spark List's dataGroup when user traverses thru items?
            injpix Level 3

            That will work!

             

            Thanks for your time.  I've been itching for months to get this task completed.