AxureRP8实战手册-案例12（动态面板：自动图片切换）

Posted 2021-02-27 sikongluoxing

AxureRP8实战手册-案例12（动态面板：自动图片切换）

 AxureRP8.0教程  小楼一夜听春语  4年前 (2016-06-17)  24667℃  0评论

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

案例来源:

淘宝-首页

 

案例效果：

• 页面打开时：（图1-82）

案例描述：

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

 

元件准备：

• 页面中：（图1-83）

元件命名：

• 动态面板（多状态添加图片）：SlidePanel
• 矩形（圆点分页标签）：Tag1~Tag5

思路分析：

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

操作步骤：

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

2、双击进入状态“State1”，添加一张图片到画布左上顶点的位置；（图1-85）

3、参考上一步，将剩余四张图片分别放入到状态“State1”~“State5”中；（图1-86）

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

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

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

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

• 条件判断设置：（图1-89）

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

• 用例动作设置：（图1-90）

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

• 事件交互设置：（图1-91）

9、参照用例2，依次添加用例3~4；

 

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

• 事件交互设置：（图1-92）

特别提醒：本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。

 

转载请注明：Axure原创教程网 » AxureRP8实战手册-案例12（动态面板：自动图片切换）