【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。

这个就是最后抽签中的结果到此完成抽签，但是我们还要将按钮和动效文本恢复原状，这样下一次抽签才能正常：

设置文本：设置动效文本的值==20（初始值）

启用：启用抽签按钮

到这里我们就完成了整个抽签的模型了，这里是一个简单的抽取人名的方式，你们也可以在中继器内添加图片，变成一个抽奖的原型，有兴趣的同学可以课后尝试一下。

那以上就是本期的全部内容了，感谢您的阅读，我们下期见，88~~~

本文作者 @做产品但不是经理 。

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！