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

编辑导读:随机函数是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。