Axure教程:模拟真实摇骰子交互
时间:2020-05-14

本文教大家一个模拟真实摇骰子交互,一起来看看~

在做这个教学时有个重大发┝现,原来骰子的骰拼音不是“shi”而是“tuΩ”!这是比本教学更重要的内容。

你将会学会的交◈互效果图∑:

你将学到的东西:

使用随机数字来实现一些骚操作 通过动态面板来控制停和不要々停 文本框的妙用 ┏文末有彩蛋

本教学原理:

通过动态面板循环计算产生1-6随机数赋■值到文本框; じ文本框У文本改变来控制动态→面板要展示的骰子数。

第一步:通过动态面板۩๑计算随机数字

1. 绘制如下三个ぷ元件

动态面板,创建2个状态,命名[控制┙随机] 文本框,命名[随机数字] 按钮,命名[开关按↕钮]

2. 设置[控制随机]动态面板交互

①[控制随机]新建交互状态改变时,设置文本[∩随机数字]文本框=[[Math.cei⿷l(6*Math.random())]]

函数解释:

Math.►randoΞm():即随︵机产生0-1内的随机数,前面加6*,即随机产生0-6随机数

Math.ceil(x):即取整

本函数的意思是取0-6⿻之间的随机正整数

3. 设置[开关按钮⊙]交互

①[开关按钮]点击时,情形1,如果[按钮开关]元件文字为“开”,则执行以下条件:设置[控制随机]动态面板到下一项,循环间隔100ms。设置文本[开关按钮♧]元件文字为“关”

②[开关按钮]点≥击时,情形2,如果[按钮开关]元件文字为“关”,则执行以下条件:设置[控制随机]动态面板停止循环。设置文本[开关按钮]元件文字为“开”

④看看效果

每100ms变换一次数字

第二步:绘制骰子和用文本框控制骰子

绘制骰子

①绘制六个骰子

②填充颜⊿色后,创建一个动态面板,命名[骰子],添加六个状态,分别把六个骰子放到六∈个状态里。

③设置[控制随机]输入文本框交互,文本改变时,添加六个情形,当[随机数字]输入文本框=1时,设置[骰▄子@]动态面板为状态1,依次类推。

设置六个情形:

④看看效果

这样[骰子]动态面板会随着∏文本框的改变而改变,这就是利用输入文本框的“文本改变时”的妙用。

第三步:利用随机数模拟真实移动

由于骰子在运动过程中↔,既有旋转,又有位移,且随开关控制,๑·ิ.·ั๑其实很┎简单,我们只需要在[控制随机]动态面板增加两个动作:

旋转[骰子]经过60,⿰动画线性г100ms

移动[骰子]到达X=[[Math.ceil(10♂0*M╪ath.random())]],YЖ=[[M⊙ath.ceil(100*Math.random())]],动画线性100ms⊿。这个函数的意思就是移动[骰子]在100*100范围内随机移动

看Ы看效果:

最终效果1:

最终效果2:

大家思考一下怎么实ъ现,原理很简单∏

这次教学И就到这里,我有时候做交互只是觉得好玩而已,同⌒时可以Ⅺ锻炼逻辑思维能力。很多同学都反映源文件打不开,因为我用的是9.0的,习惯了也挺好用的,有疑问欢迎留言。

源文件下载地址:

链接:https://pa■n№.baidu.com/s/1iZlcYaNN9IxqGDiC4xXruw

提取码:8oy5

 

本文由 @索大佩⊙罗娜 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于C✿。✿C0协议

上一篇: 天极网首页新闻频道广告位推荐
下一篇: SE如何计算的跳出率

热门推荐

精选推荐

摆夜市套圈圈赚钱不_摆早餐摊卖什么赚钱_搬砖多少一块 2019-2022版权所有