设置|用中继器制作抽签原型

编辑导读：随机函数是axure里面常用的函数，常用于验证码、抽签等案例。本文作者分享如何制作高保真的抽签原型，希望对你有帮助。

文章插图
随机函数是axure里面常用的函数，常用于验证码、抽签等案例。所以今天作者就教大家如何制作高保真的抽签原型。该原型主要使用中继器原件配合随机函数制作，通过填写中继器表格内容，或者复制excel表格内容到中继器表格，通过交互自动实现抽签效果，完成后如下如所示效果：

文章插图
原型地址：https://da8lw5.axshare.com
一、材料准备1. 中继器布局：为水平分布，每行项目数为5；背景颜色：为白色和灰色交替；
内部矩形：设置选中样式为浅蓝色（抽签过程中闪烁效果），禁用样式的边框颜色为蓝色（抽签完成后抽中的效果）。
表格：共4列，no列为按12345……填写；text列为文字列，填写抽签人民；xuanzhong列用于记录选中的格子（模拟抽签过程中闪烁效果），默认为空；jinyong列用于记录抽中的格子（模拟抽签完成后抽中的效果），默认为空。

文章插图
2. 按钮抽签按钮：填充颜色默认为蓝色，禁用时为浅蓝色；文字默认为白色，禁用时为灰色
3. 文本标签需要增加两个文本，只用于逻辑处理，默认隐藏

动效文本：用于记录抽签是闪烁效果的次数，这里我们默认20次
随机数文本：用于记录随机数，默认为空

二、交互制作1. 中继器载入时交互

设置文本：将中继器内部矩形的文本设置为Item.text，即中继器表格内text列的值
如果xuanzhong列的值为1，设置中继器内部矩形的选中状态为真，因为之前我们设置了矩形选中是填充颜色变蓝色，所以如果xuanzhong列的值为1，对应的矩形就会变蓝
如果jinyong列的值为1，设置中继器内部矩形为禁用，因为之前我们设置了矩形禁用时线段颜色为蓝色，所以如果jinyong列的值为1，对应的矩形就会有个蓝色的外框线

文章插图
2. 抽签按钮鼠标单击时按钮这里需要分两种情况，一种是动效文本大于0，即还在抽签闪烁的过程中；另一种是动效文本不大于0，即抽签已经完成。
动效文本大于0时的交互为：
禁用：禁用当前按钮，在抽签结束前不能在按该按钮，防止同时进行多次抽签。
标记行：标记中继器内全部行
更新行：更新中继器内标记的行，即全部行，把xuanzhong和jinyong列的值全部更新为0。这一步和上一步合起来其实就是一个恢复原样的操作，因为之前如果抽过一次，就会有值残留。
设置文本：这里我们要设置随机数文本=(Math.random*LVAR1.itemCount).toFixed(0)，Math.random是随机函数，代表从0-1之间去一个小数，LVAR1.itemCount是中继器的行数，toFixed是四舍五入函数。
更新行：更新中继器条件符合Item.no==随机数本文的值，即刚刚随机数对应的行，将该行的xuanzhong中设置为1。
等待：等待200ms
设置文本：动效文本为他的值-1
触发：触发抽签按钮鼠标单击时事件。
这里其实就是通过控制xuanzhong列的值，起到一个模拟抽签的闪烁效果，没200毫秒闪烁一次，闪烁的次所由动效文本决定，例如案例中动效文本默认值为20，则会闪烁20次。

文章插图
动效文本小于等于0时的交互为：
更新行：更新中继器条件符合Item.no==随机数本文的值，即刚刚随机数对应的行，将该行的jinyong列的值设置为1。