原标题：Axure教程：转盘抽奖交互原型
本文跟大家分享，如何使用axure制作转盘抽奖交互原型，不带登录流程。
效果如下：
抽奖流程
一、主要内容
（1）主要元件：动态面板
（2）重点：旋转交互、随机函数、触发动作。
（3）难点：通过停止位置判断抽奖结果
（4）涉及函数及解释：
（1）框架页面
包含手机边框+内联框架，主要用于将内容调入当前页面，展示整体效果。
双击内联框架，选中index（内容）页面，把内容页面引用到内联框架中。
（2）内容页面
包含作品全部元件内容。（提示内容默认隐藏）。
三、原型拆解说明
（1）转盘
由两大部分组成，背板+按钮，旋转部分与按钮指针分开，方便添加交互，对背板命名为：zhuanpan。
（2）剩余次数
数字为单独的文本标签，这样方便对数字进行运算。数字3命名为：cishu
（3）抽奖结果动态面板拆分说明
抽奖结果动态面板包含四个面板状态，并分别对应转盘上的四个奖项。动态面板命名为：jiangpin，默认设置隐藏。
四、交互动作 1. 【开始抽奖】按钮交互
鼠标单击时：添加判断如果次数（cishu）元件值大于0，执行旋转，次数减1等交互；当次数（cishu）值小于0，显示提示信息，2秒后隐藏。
交互设置：
把抽奖结果交互写在奖品（jiangpin）动态面板的任何事件都可，当前以写在载入时为例。
因为转盘上有4个奖项区间，每个区间90度范围；停止后，用最终旋转的度数除以360度，取余数，就能判断在转盘相应的位置，然后再输出相应奖项（设置面板状态）。
其中，需将else if，转换为if。
添加条件的具体设置见下：
表达式说明（[[LVAR1.rotation%360]]）：获取转盘（zhuanpan）旋转角度，取余360。得到最终停止的角度。
3. 【确认收下】按钮交互
鼠标单击时：隐藏奖品（jiangpin）动态面板。
五、整理
将jiangpin动态面板、提示（tishi）元件移入内容区域垂直剧中对齐；全选所以内容，将坐标改到（0,0）原点。
最后回到框架页面，预览一下整体效果。
原型下载：链接:https://pan.baidu.com/s/1jqNv5xZgkuUNF9nJkeR9Tw 密码:66l4
本文由 @松林放牛娃 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自 Pexels，基于 CC0 协议游戏网
责任编辑：
| 相关下载 |
原标题：千元级Wi-Fi 6 华硕AX3000电竞路由冲刺5G速度 5G时代的到来，让网络速度有了质变效果，甚至5G手机的测速已经能够超越家庭光纤宽带了。然而，在实详情>>
原标题：Axure RP 9 教程：模拟微信系列（3）——模糊查询 本文是模拟微信的第三篇，本次模拟的主要内容是利用中继器和LVAR.indexOf(”)函数实现模糊查询详情>>
原标题：Axure RP 9 教程：模拟微信系列（2） 今天给大家送上模拟微信系列第二篇，我们使用简单的函数组合来达到我们想要的显示效果，只要懂得其原理，我们就详情>>
原标题：AX2 STUDIO 小宇航员和小狐狸 搪胶公仔 这是个关于一个叫Leori的宇航员男孩和他的伙伴小狐狸Foxy，一起在太空开加油站的故事，他们常说：“你抬详情>>
原标题：Axure 中继器：如何实现微信九宫格设计交互？ 如何利用Axure中继器实现微信九宫格设计交互？一起来文中看看~ 下面这张图就是大家熟悉的、不详情>>
原标题：华为Mate30Pro、三星Note10+和中兴天机Axon10Pro，5G手机选谁？ 文/焦运杰 审校/李俊慧 5G不是给手机准备的？ 日前，工业和信息化部苗圩部长在国详情>>
原标题：Axure RP8 教程：照片胶片放映滚动效果制作（二） 用Axure RP8实现照片胶片放映滚动效果还有哪些方法呢，一起来看看~~ 继上一篇文章《Axure RP详情>>
原标题：线上课程 | 产品新人如何通过Axure原型设计，展示自己的可塑性？ “简历投出去20天了，一个面试通知都没有，怎么办……”听到樊凡同学这个“悲剧详情>>
原标题：Axure教程：如何实现计时 总所周知，手机通常自带了一个计时小工具。于是前不久，笔者突发奇想能不能用Axure做出这个小工具，因此笔者将以此为案详情>>
Axes.io（丢斧大作战）是io系列刚推出的一款新作，玩法和之前的io游戏是类似，这个游戏的画风㛑继承之前的游戏比较魔性，玩法也很魔性，在这个游戏中玩家需要通过不断的走位然后拿斧头详情>>
Axe背水一战是一款采用了核心3D引擎打造的韩系幻想MMORPG手游大作，游戏开创了一个庞大宏伟的幻想世界，玩家可以在这里自由探索和冒险厮杀，你需要称霸这片庞大的幻想大陆，夺取属详情>>
《AXYOS：战斗牌（AXYOS:Battlecards）》是一款全新的战术纸牌游戏，由AxyosGames公司制作发行。玩家在游戏中扮演一个指挥官，你可以在一次次的战斗中发明和使用不同的战术！并且你可以详情>>
很多网站的banner都采用幻灯切换效果，页面简洁而富有动感。如何使用Axure RP 8快速实现幻灯切换效果？简单几步，让你轻松几步解决。攻略对象Axure RP 8步骤分解11. 准备好需要插详情>>
原标题：iView Axure组件更新1 1版本：如何在Axure中使用字体图标？ 上一次分享了iView的Axure组件库的1 0 详情>>
中兴推出Axon10Pro5G旗舰机型，支持5G通讯。中兴Axon10Pro5G配置怎么样?Axon10Pro5G什么时候出?99安卓网小编介绍下中详情>>
Intel最新版的Wi-FiLinux网卡驱动“IWLWIFI”泄露了不少新型号，尤其是Intel的第一款802.11ax详情>>
