Axure RP 动态面板状态改变动时-图片轮播案例

动态面板状态改变时是指在多状态的动态面板中，随着动态面板显示不同的状态，其它部件或页面等发生相关的变化。下面以网页中常见的图片轮播为案例来介绍如何使用。

步骤1：

从部件库中拖拽一个动态面板到线框图编辑器中，双击动态面板打开“动态面板状态管理”窗口，在“动态面板名称”处填写名称“图片轮播”，点击“+”新增两个新状态，分别命名为“图片1”、“图片2”



步骤2-1：

在“动态面板状态管理”窗口双击“图片1”，打开该状态编辑区，导入图片



步骤2-2：

在“动态面板状态管理”窗口双击“图片2”，打开该状态编辑区，导入图片



步骤2-3：

在“动态面板状态管理”窗口双击“图片3”，打开该状态编辑区，导入图片



步骤3：

回到首页，从部件库中拖拽三个矩形到动态面板“图片轮播”下面，并调整大小为w=8（px）；h=8（px）；形状调整成圆形，并分别在“部件交互和注释”窗口命名为“圆1”、“圆2” 、“圆3”



步骤4：

选中三个圆形，在“部件属性和样式”窗口中，在“设置选项组名称”后的单行文本框中输入名称“循环”



步骤5：

选中三个圆形，在“部件属性和样式”窗口中，在点击“选中时”，打开“设置交互样式”窗口，设置选中时的交互样式；点击“确定”



步骤6：

选中“图片轮播”动态面板，在“部件交互和注释”窗口中，双击“载入时”，打开用例编辑器



步骤7：

第二步：点击新增动作—选择“动态面板”，点击“设置面板状态”；

第四步：配置动作—勾选“图片轮播（动态面板）”，选择状态“Next”；勾选“从最后一个到第一个自动循环”，勾选“循环间隔2000毫秒”；点击“确定”



步骤8：

在线框图编辑器区中，选中动态面板“图片轮播”，双击“动态面板状态改变时”，打开用例编辑器



步骤9：

第一步：用例说明—点击“新增条件”打开“条件生成”窗口，设置“动态面板状态 图片轮播=状态 图片1”，点击“确定”



步骤10：

第二步：点击新增动作—选择“部件”，点击“选中”；

第四步：配置动作—勾选“圆1（形状）”；点击“确定”



步骤11：

参考步骤8打开用例编辑器，再次给动态面板“图片轮播”添加“动态面板状态改变时”事件；第一步：用例说明—点击“新增条件”打开“条件生成”窗口，设置“动态面板状态 图片轮播=状态 图片2”，点击“确定”



步骤12：

第二步：点击新增动作—选择“部件”，点击“选中”；

第四步：配置动作—勾选“圆2（形状）”；点击“确定”



步骤13：

参考步骤8打开用例编辑器，再次给动态面板“图片轮播”添加“动态面板状态改变时”事件；第一步：用例说明—点击“新增条件”打开“条件生成”窗口，设置“动态面板状态 图片轮播=状态 图片3”，点击“确定”



步骤14：

第二步：点击新增动作—选择“部件”，点击“选中”；

第四步：配置动作—勾选“圆3（形状）”；点击“确定”



步骤15：

制作完成，保存，生成原型预览效果



该axure学习视频，axure快速原型设计见陪学网链接地址：http://www.pexue.com/