快好知 kuaihz

Axure 教程:突发奇想的“菜单转盘”

之前中午和同事一直在纠结吃什么,突发奇想想到了转盘抽奖的模式做一个“转盘选餐”的原型图,大家仅供参考。

结果图如下所示:

设计思路:

设计一个圆盘做为底盘;

增加“抽奖”按钮及旋转指针。

预计实现效果:点击“抽奖”按钮,触发底盘旋转,大约2s后底盘停止转动,指针所在区域即为选中结果。

涉及内容:旋转、随机函数(random())。

首先,利用“圆”、“垂直线”和“文本框”绘制一个转盘底盘组合;如图所示:

接着,在底盘上加指针及触发按钮“抽奖”,并对“抽奖”按钮设置“鼠标单击时”事件,选择“旋转”勾选转盘组合。

设置旋转方向为顺时针旋转为“相对位置(by)”,若是“绝对位置(to)”则抽奖转盘转完后,再次单击则无法实现随机抽奖转动;

设置角度,由于需要抽奖单击随机,所以此处我们需要使用到函数[[100000+random()*360]]°

最后保存并点击浏览即可,一个简单的小交互就实现了。

交互的rp文件,朋友们可以下载查看详情:https://pan.baidu.com/s/14KDGnuMjEOJmkRtY5dRHbQ

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:转盘  转盘词条  奇想  奇想词条  突发  突发词条  菜单  菜单词条  教程  教程词条  
原型

 PRD1.0分享:全面通用的移动...

花了大概1年整理出一份全面通用的移动端产品需求文档,包含了我多年产品经验以及对业务的理解,对技术原理的涉及。命名为浪子PRD1.0,请查看全文后再直达源网址。这...(展开)

原型

 Axure的这些实用技巧,你都知...

在评估一位产品新人的原型时,发现对方竟然不知道Axure的很多实用技巧,导致很多效果都是用极其复杂或者笨拙的方式实现。Axure是产品经理的必备工具之一,熟练使...(展开)

原型

 Axure教程:如何制作3D动效...

早几期文章,我说没有我做不出的交互,于是有同学加我微信,说老师你能实现这个3D效果吗?我本来想怼她一顿,这是平面软件,但是一气之下我就把她说的3D效果做出来了。...(展开)