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

 

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

版权声明

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

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部