AxureRP8实战手册-案例12(动态面板:自动图片切换)

 案例12.   动态面板:自动图片切换

案例来源:

淘宝-首页

案例效果:

  • 页面打开时:(图1-82)

1_82

案例描述:

固定区域循环播放一组图片(幻灯片效果),圆形分页标签随着播放不同的图片,而对应改变样式。

元件准备:

  • 页面中:(图1-83)

1_83

元件命名:

  • 动态面板(多状态添加图片):SlidePanel
  • 矩形(圆点分页标签):Tag1~Tag5

思路分析:

  • 利用动态面板可添加多个状态的特性,创建5个状态;(操作步骤1)
  • 将5张需要展示的图片放到各个状态里面;(操作步骤2~3)
  • 将圆点分页标签做成只能唯一被选中的效果,并设置第一个圆点默认被选中;(操作步骤4)
  • 页面打开后,开启图片循环播放的效果;(操作步骤5)
  • 每次切换到新的图片时,根据状态名称选中圆点分页标签,呈现橙色效果。(操作步骤6~10)

操作步骤:

1、拖入动态面板到画布,命名为“SlidePanel”,双击动态面板(或者在概要面板中鼠标双击动态面板名称),点击【+】图标,为动态面板添加5个状态;(图1-84)

1_84

2、双击进入状态“State1”,添加一张图片到画布左上顶点的位置;(图1-85)

1_85

3、参考上一步,将剩余四张图片分别放入到状态“State1”~“State5”中;(图1-86)

1_86

4、拖入一个矩形,设置为圆形,在元件属性中为其设置【选中】的样式,{设置选项组名称}为“Tag”,并调整为合适的大小;点中此元件,按<Ctrl+D>键复制成5个后,摆放在合适的位置上;因为这几个元件变小后不易操作,可以在概要面板中,为这几个命名为“Tag1”~“Tag5”;(图1-87)

1_87

5、点中动态面板“SlidePanel”,为其【载入时】事件添加用例,设置动作为【设置面板状态】“SlidePanel”为【Next】;同时,勾选【向后循环】与【循环间隔】的选项,并设置自动循环间隔的时长为“2000”毫秒;一般来说,页面打开时,不会直接切换到第二个状态,所以这里还要勾选【首个状态延时***毫秒后切换】;最后,设置下个状态进入与当前状态退出的动画均为【向左滑动】“500”毫秒;

  • 用例动作设置:(图1-88)

1_88

6、为动态面板“SlidePanel”的【状态切换时】事件添加用例1;为用例添加条件判断,判断【面板状态】“SlidePanel”【==】【面板状态】“State1”;

  • 条件判断设置:(图1-89)

1_89

7、继续上一步,添加符合该条件的动作,【选中】元件“Tag1”;

  • 用例动作设置:(图1-90)

1_90

8、再次双击事件的名称或双击点击【+】,参照用例1添加用例2的条件和动作;判断【面板状态】“SlidePanel”【==】【面板状态】“State2”;动作为【选中】元件“Tag2”;

  • 事件交互设置:(图1-91)

1_91

9、参照用例2,依次添加用例3~4;

10、因为,除去用例1~用例4的判断内容,就只剩下最后一种情形;所以,用例5无需进行条件内容的设置,直接设置动作为【选中】元件“Tag5”。

  • 事件交互设置:(图1-92)

1_92

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值