Axure使用中继器实现随机数字键盘

Axure使用中继器实现随机数字键盘

今天给大家分享一下教程,那就是使用Axure实现随机数字键盘的功能,可能有一定的难度,毕竟数字键盘好实现,如果要将数字随机还是有些复杂的,不过也没有那么难实现,只要开拓思维,清楚其中交互,就变得简单不少。

添加中继器,将中继器的矩形调整到适当大小。

样式中选择水平布局,网格排布,每排项目数3。

Axure中继器建立数据

建立中继器数据:num:分别为数字1、2、3……9、0,10个数字,以及C清除,X删除,共计12条数据。sortRnd:辅助排序列,随机此列数据,利用对此列数据的升降序排序对num进行随机顺序的显示。而我们需要乱序排列的只是数字,不包含C和X,所以需要分别处理,将需要随机的赋值0,不需要随机的赋值1。

为什么要分别赋值0和1呢?

稍后我们将对赋值非1的sortRnd进行随机,随机函数[[Math.random()]]随机出来的结果是0-1之间的小数。我们的需求是数字在前,C和X在后面。如果将C和X赋值1,那么在对sortRnd升序排序时,C和X就必定会在最后。

增加一个按钮,用于点击后对键盘数字随机的交互操作。

在鼠标单击时交互中,添加数据集->更新行的动作,对键盘数字的sortRnd进行随机。

Axure鼠标单击时

随机时,只对键盘数字的sortRnd随机,所以需要在更新行时添加条件[[item.sortRnd != 1]],!=的意思就是≠。

点击选择列,选择要随机值的列sortRnd,然后将值(Value)赋为[[Math.random()]]。

随机后,键盘数字的sortRnd会变成0-1时间的小数,而C和X还是1。因为我们设置的条件是!=1,所以再次点击随机按钮时,被随机的仍然是键盘数字的sortRnd值,不影响C和X。

最后,我们要对中继器中的矩形下手啦~首先是最基础的“载入时”,载入时呢要添加排序,根据我们随机之后的sortRnd的数字大小Number进行升序排序,升序就是数字越靠后越大。

Axure载入时

以1、2、3为例,例如Num1的sortRnd随机结果是0.8,Num2的sortRnd随机结果是0.2,Num3的sortRnd随机结果是0.5,那么排序后的结果就是2、3、1。

Axure排序

这时的键盘,前10个位置是数字,最后2个是C和X,但我们的需求是左下为C,最下中间为第10个数字,那么要怎么做呢?看下一步吧~

先看下整体思路

Axure交互思路

每项加载时,要将矩形中的文本设置为[[item.num]],这是一开始就有的,这样才能把值载入到矩形中。这项的条件是If True,是必选项,加载时必须出现此用例。

目前我们差的只是最下一排,按照顺序左下是第10个,最下中间为第11个,需要做的事情就是让第11个变为第10个的数字,让第10个变为C。

双击“每项加载时”,添加新的用例,[[item.index]]的值等于10时,也就是当前是第10个格子的时候,将这个格子的值存入全局变量中,这里我用的是默认的全局变量OnLoadVariable。存好后,再将这个格子中的文字设置为C,删除键。

Axure添加条件

现在第10个格子搞定了,我们还需要对第11个格子进行处理,这个就更简单啦。

Axure加载时

只需要让第11个格子的文本等于之前记录好的全局变量OnLoadVariable就大功告成了。

Axure完成

以上内容就是使用Axure软件实现随机数字键盘的教程了,更多感兴趣的教程,点击文章:使用Axure制作的移动端交互原型教程

在线客服
客服邮箱
客服电话
17051276424