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

AxureRP8.0教程 Synmo梦儿 552℃ 0评论

前言

这篇教程源于半个月前,小楼在群里欣喜万分的发来了他的新教程《随机数字键盘的实现》,但是不知为什么,这篇教程迟迟不能打开,一片白屏……⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄早就和小楼说了,不要用服务器看小电影,他不听呀。但那时的我突然好想要……看到我楼的新教程,可又得不到,所以我在未看教程的情况下自己也做了一下随机数字键盘。结果!小楼关掉了小电影之后,我打开了他的教程发现,我和小楼的实现思路果然不一样!同一种效果,实现方法可能会有很多种,这也是Axure好玩的地方之一。后来我和小楼分享了制作思路后,他帮我做了调整,我决定:写下我的实现方法,帮大家开拓思路。

【1】中继器外观

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

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

【2】建立中继器数据

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就必定会在最后。

【3】辅助排序数据处理

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

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

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

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

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

【4】键盘数字排列

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

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

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

【5】键盘顺序设定

先看下整体思路

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

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

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

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

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

 

如果你需要使用icon图形化表达C和X按钮,可以直接在对应位置上覆盖一个矩形,放入你喜欢的图标。

至于如何点击键盘输入数字,这里就不再教啦,可以参考小楼的教程,都是一样的。

 

需要源文件的小伙伴可以加入到梦儿自己的Axure群(542524521)在群文件中下载,欢迎对Axure有兴趣的小伙伴加入,这里可以帮解答问题,但要求一定要有学习态度,带着脑子去提问。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 使用中继器实现随机数字键盘

喜欢 (10)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(7)个小伙伴在吐槽
  1. 用力顶梦儿!
    梦儿迷弟2017-09-21 07:39 回复
    • 帮你一起顶
      我也要2017-11-07 11:56 回复
  2. 10和11格交换失败~~~~
    菩提2017-09-30 11:13 回复
    • 用例顺序交换一下,case 1(if true)放在最后面
      南陌2017-11-01 16:14 回复
  3. 最美丽的梦儿老师,我设置返回按钮的函数为[[f.substr(0,f.length-1)]] (f是焦点元件文字),为啥不能删除呢
    rockey_72017-10-16 15:05 回复
    • 设置为空反而是可以的,是不是这个函数有问题呢
      rockey_72017-10-16 15:07 回复
    • 这个函数没问题的吖,可以实现删除最后1位的功能。
      Synmo梦儿2017-10-16 15:21 回复