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 然后播放动画,一切就是这么简单,而且效率极高。

posted @ 2016-07-19 21:50  天才混混  阅读(209)  评论(0编辑  收藏  举报