Fex4中使用Group滑動翻頁

使用Group配合Animate實現分頁，並且實現翻頁的動畫：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="955" minHeight="600">
    <fx:Script>
        <![CDATA[
        import spark.core.NavigationUnit;
 
        /**
         * 上一頁
         */
        private function prePageHandler():void
        {
            smp.valueBy = hGroup.getHorizontalScrollPositionDelta(NavigationUnit.PAGE_LEFT);
            anmiate.play();
        }
 
        /**
         * 下一頁
         */
        private function nextPageHandler():void
        {
            smp.valueBy = hGroup.getHorizontalScrollPositionDelta(NavigationUnit.PAGE_RIGHT);
            anmiate.play();
        }
 
        ]]>
    </fx:Script>
    <fx:Declarations>
        <s:Animate id="anmiate" target="{hGroup}" duration="800">
            <s:motionPaths>
                <s:SimpleMotionPath id="smp" property="horizontalScrollPosition"/>
            </s:motionPaths>
        </s:Animate>
    </fx:Declarations>
    <s:Panel title="Flex4 Group新特性">
        <s:HGroup id="hGroup" gap="10" height="100" width="320" clipAndEnableScrolling="true">
            <s:Button width="100" height="100" label="1" fontSize="30"/>
            <s:Button width="100" height="100" label="2" fontSize="30"/>
            <s:Button width="100" height="100" label="3" fontSize="30"/>
            <s:Button width="100" height="100" label="4" fontSize="30"/>
            <s:Button width="100" height="100" label="5" fontSize="30"/>
            <s:Button width="100" height="100" label="6" fontSize="30"/>
            <s:Button width="100" height="100" label="7" fontSize="30"/>
        </s:HGroup>
        <s:controlBarContent>
            <s:HGroup width="100%" horizontalAlign="center">
                <s:Button label="上一頁" click="prePageHandler()"/>
                <s:Button label="下一頁" click="nextPageHandler()"/>
            </s:HGroup>
        </s:controlBarContent>
    </s:Panel>
</s:Application>

使用motionPaths屬於Animate可以同時設定目標的多個屬於以實現更加複雜的動畫，在這裡我們只要改變Group的horizontalScrollPosition即可，

因為在Group容器在不能把子集全部顯示出來的時候，horizontalScrollPosition和verticalScrollPosition會自動計算出來，這個兩個屬性是給Scroller用的。

最靈活最巧妙的地方就是這兩屬性不光可以做為滾動條使用，可以通過Animate改變其值，實現滑動的效果。

NavigationUnit是一個列舉類，他定義了PAGE_UP、PAGE_DOWN、PAGE_LEFT、PAGE_RIGHT等等，這裡我們用了HGroup，是橫向的，所以只用PAGE_LEFT,PAGE_RIGHT就可以了，

還有一點非常重要，那就是Group的兩個方法:getHorizontalScrollPositionDelta()和getVerticalScrollPositionDelta()，使用這個兩個人方法和NavigationUnit列舉類的引數，可以計算出左移或者右移當前頁時，

所需要調整的horizontalScrollPosition值。以此類推，可以使用VGroup實現上下的翻頁，TileGroup可以實現上下左右的翻動，而且修改起來非常簡單。

就是這樣，計算出滾動距離傳給SimpleMotionPath 然後播放動畫，一切就是這麼簡單，而且效率極高。