您好,欢迎来到口耳相传正版软件商城!
商品分类

【Axure基础教程】随机乱序数字键盘,让数字再飞一会儿

引言:

我以前用Axure做过一个小游戏,叫“数字华容道”。

【Axure基础教程】随机乱序数字键盘,让数字再飞一会儿
数字华容道

可以点击下方链接试玩一下:

https://demo.axureshop.com/?url=https://cloud.axureshop.com/r5nmdi&buyurl=https://www.axureshop.com/a/1689378.html

这是用中继器实现的,其中就用到了随机乱序的小技巧。

下面我们来实现一个随机乱序数字键盘:

中继器设置

  • 首先我们要拖出来一个中继器,默认的矩形改为100*100。
  • 建两个列,一个叫num,存放0~9的数字,一个叫sort,空着就行。
  • 布局设置为水平网格分布每行项数量3
【Axure基础教程】随机乱序数字键盘,让数字再飞一会儿

已经完成大半了,接下来改交互了。

中继器交互

设置文本大家应该都会,但是最后的数字应该放在中间,所以我们需要先判断一下如果是最后的要向右移一个矩形宽度。

【Axure基础教程】随机乱序数字键盘,让数字再飞一会儿
只移x坐标

最最最最重要的一步来了,中继器的载入时做两步:

  • 第一步要添加一个按照sort列的数字Number排序(如果你的Axure不能按数字排序,很有可能是汉化包的问题,请使用英文原版
  • 第二步就是更新所有行的sort列的值为[[Math.random()]],符合任何真值规则都可以,我这里使用了[[1>0]]
【Axure基础教程】随机乱序数字键盘,让数字再飞一会儿
更新全部列为随机数

测试

好了,现在每次刷新页面都是一个随机乱序的数字键盘了,为了测试方便,我们可以再拖出来一个按钮,单击时的交互为触发上面中继器的“载入时”。看一下效果:

【Axure基础教程】随机乱序数字键盘,让数字再飞一会儿

测试地址:

https://5gn5xg.axshare.com/#id=yjlfvj&g=1

原型下载:

随机乱序键盘.rp

关注我,带你见识Axure世界的精彩。

发表回复

登录后才能评论

评论列表(3条)

联系我们

联系我们

1691750823-kfrx

在线咨询:点击这里给我发消息

邮件:1691751467-kfyx

工作时间:周一至周五,9:30-17:30,节假日休息

关注微信
关注微信
分享本页
返回顶部