转盘抽奖一般会出现在一些金融类网站中，通过转盘抽奖来激活用户浏览行为，后来又多用于微信的公众号运营中，通过转盘抽奖来宣传活动，从而达到吸粉的目的。这一章就教大家如何使用axure原型工具制作转盘抽奖原型。
第一步：拖拉摆放好相关控件
1、转盘：300X300的白底黑框圆形，一条垂直线、一条45度垂直线、一条水平线、一条45度水平线，四线交叉组合居中放于白底黑框圆形上方，将白底黑框圆形等分切割成八份，每一份放一个文本标签，文本标签的文字角度可通过键盘微调适当即可，文本标签的文字有三个分别是“一等奖”，“二等奖”和“三等奖”，其余的皆为“谢谢惠顾”，将以上元件组合并命名为“转盘”。
2、抽奖按钮：100X100的灰底黑框圆形，中间文字为“抽奖”，将此元件命名为“抽奖按钮”，并居中置于“转盘”上方。
3、抽奖指针：10X32的灰底黑框三角形，将此元件命名为“抽奖指针”，并置于“抽奖按钮”的正上方。
第二步：为“抽奖按钮”添加鼠标单击时用例
此用例中只添加一个动作，即：相对旋转转盘，角度为[[100000+Math.random()*360]]，方向为顺时针，锚点为中心，动画为线性，时间为2000毫秒。
好了，预览并点击“抽奖按钮”即可以看到转盘抽奖效果。同时也可以随时关注我的个人博客：http://weidublog.com，因为工作过程中有很多这些axure原型设计小技巧的例子，所以我会坚持分享下去，希望对大家有帮助，你们对我的关注就是我的动力。
效果图：axure原型设计之转盘抽奖
附件下载：转盘抽奖rp文件
作者：维度
本文来自简书，本文观点不代表 PmTemple 立场，转载请联系原作者。原文链接：https://www.jianshu.com/p/cf47b0c1672c
微信扫一扫 
支付宝扫一扫 
评论列表（4条）
这个转盘抽奖实现太简单粗暴了，随机数范围100000+Math.random()*360简直是个骚操作，相当于抽奖完全拼人品啊！不过作为Axure原型确实够用，真要上线的话，服务器端随机数才是正道，不然用户哪知道你有没有后台控制概率。博主挺实在，教程接地气！
这个转盘抽奖设计太ins风了！就像时尚品牌搞的限时活动，用户参与感拉满。不过我觉得如果能加上一些时尚元素，比如潮牌联名款的抽奖，可能会更有吸引力～毕竟现在年轻人就吃这一套！
这转盘抽奖的random角度生成有点意思，但要是能加上概率控制就更完美了，毕竟现实抽奖都是”保底机制”。Axure原型搞出来，后端兄台可要小心了，别让抽奖比我的代码还随机！
这个转盘抽奖教程太实用了！作为摄影师，我也经常需要制作互动原型展示作品集。Axure的随机旋转功能真是神奇，2秒动画效果能让用户体验更流畅。博主分享的技巧简单明了，新手也能快速上手！📸✨