翻亮图片 幸运抽奖

马震安

1. 显示图片轻松设置

打开Axure RP Pro 7.0软件，在站点地图面板将不需要的页面右击删除掉，将所保留的页面重命名（如“幸运大抽奖”）。在部件库拖动中继器到页面中，双击这个中继器，在中继器页面利用部件属性和样式面板对原有的矩形进行样式设置；在中继器数据集面板增加3列，字段名分别为ImgA（用于存放背景图）、ImgB（用于存放不同的奖品图）、sjs（用于图片的随机显示），添加行并分别在ImgA和ImgB列右击导入背景图和奖品图。在Repeater Style面板设置布局为水平，勾选换行，每个row包含3个（图2）。

接下来，右击矩形转换成动态面板并命名为“图片显示”，在部件管理面板双击动态面板中的“状态1”，在状态1窗口，拖动图片部件到矩形中，调整其大小与矩形内径相同，导入临时背景图。右击状态1复制成状态2和状态3，调整状态2和状态3窗口中的矩形和图片宽度，越来越小（图3）。

依次复制状态3、状态2、状态1，把状态1-6从上到下排列好，重新命名为1-6，这样就能实现图片的翻转效果。为了在选中图片时，图片边框变红，需要把状态6中的图片命名为tu，点击部件属性和样式面板中属性标签交互样式中的“选中”属性，设置好选中时的边框颜色为红色，线形加宽。

接着，切换到中继器窗口，在中继器项目交互面板双击Case 1，在用例编辑器窗口右击删除原有语句，添加6个“设置图像”动作，在配置动作处勾选图片显示下的“设置（图片）”，默认设置为“值”，点击fx按钮，在编辑值窗口点击“插入变量、属性、函数或运算符”，在弹出的下拉列表中前3个选择Item.ImgA，后3个选择Item.ImgB（图4）。……