Fex4中使用Group实现滑动翻页

阅读更多

在Flex4中Group取代了flex3时代的Canvas和Box容器，成为了主要的布局容器，相比Canvas和Box她更加轻量，因为至少Group中没有实现滚动条的代码。
现在这个例子展示了用Group配合Animate实现分页，并且实现翻页的动画：

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

 

转自：http://www.beasy.org/2011/06/fex4-group-feature/