当前位置: 首页> 微信电商

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

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

结果图如下∑所示:

设计思路:

设计∏一个圆盘做为底盘; 增加“抽奖”按钮及旋转指针。

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

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

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

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

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

设置角度,由于需Ш要抽奖单击随机,⿳所以此处我们★需要使用到函数⊙[[100000+ra↗ndom()*360]]

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

交互的∪rp文件,朋友们可以下载┗查看详情:https://pan.baidu.com/s/14KDGεnuКMjEOJmk〧RtY5dR⊙HbQ

 

本文由 @产品小白白 原创发布于人人都ō是产品经理。未◣经许可,禁止≦转载

题图来自Unsplash,基于CC0协议