Flex滚动(3D Carousel)组件仿mac

最新推荐文章于 2024-05-16 09:32:09 发布

原创最新推荐文章于 2024-05-16 09:32:09 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flex

Flex 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何利用papervision_phunky和tweener两个库创建一个3D滚动组件CarouselComponent，并通过代码实例展示了其基本用法，包括导入依赖、准备图片资源、配置CoverFlowContainer容器以及实现滚动效果。

Carousel Component组件是一个3D的滚动组件，组件继承自ViewStack，可以水平或者垂直展示。下面就举个简单的例子，步骤如下：

1.导入papervision_phunky.swc和tweener.swc。其中第一个包主要是3D效果，第二个是倒影滤镜效果。

2.准备好几个要展示的图片。

3.引入xmlns:containers="com.dougmccune.containers.*"命名空间。

4.写上以下代码，整个例子的源代码在附件中。

.<mx:VBox id="box" verticalGap="0" height="100%" width="100%" maxWidth="600" maxHeight="400" >   
2.               
3.            <containers:CoverFlowContainer id="coverflow" width="100%" height="100%"    
4.                horizontalGap="40" borderStyle="inset" backgroundColor="0x000000"  
5.                segments="6" reflectionEnabled="true">   
6.                   
7.                <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1">   
8.                    <mx:Image  source="images/1.png" />   
9.                </mx:HBox>   
10.                <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1">   
11.                    <mx:Image  source="images/2.png" toolTip="图片1" />   
12.                </mx:HBox>   
13.                <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1">   
14.                    <mx:Image  source="images/3.png" toolTip="图片2" />   
15.                </mx:HBox>   
16.                <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1">   
17.                    <mx:Image  source="images/4.png"  toolTip="图片3"/>   
18.                </mx:HBox>   
19.                <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1">   
20.                    <mx:Image  source="images/5.png" toolTip="图片4" />   
21.                </mx:HBox>   
22.                <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1">   
23.                    <mx:Image  source="images/6.png" toolTip="图片5" />   
24.                </mx:HBox>   
25.                <mx:HBox width="260" height="260" borderStyle="solid" borderThickness="1">   
26.                    <mx:Image  source="images/7.png" toolTip="图片6" />   
27.                </mx:HBox>   
28.            </containers:CoverFlowContainer>   
29.            <mx:HScrollBar id="scrollbar" width="100%" pageSize="1" maxScrollPosition="{coverflow.numChildren - 1}"  
30.                scrollPosition="{coverflow.selectedIndex}"    
31.                scroll="coverflow.selectedIndex = Math.round(scrollbar.scrollPosition)" />   
32.        </mx:VBox>

效果如下：

垂直效果

滚动效果