上海金桥建设监理有限公司网站,数码家电商城网站源码,聊城网站建设推广,知名男艺人工作室本文跟大家分享#xff0c;如何使用axure制作转盘抽奖交互原型#xff0c;不带登录流程。效果如下#xff1a;抽奖流程一、主要内容(1)主要元件#xff1a;动态面板(2)重点#xff1a;旋转交互、随机函数、触发动作。(3)难点#xff1a;通过停止位置判断抽奖结果(4)涉及函…本文跟大家分享如何使用axure制作转盘抽奖交互原型不带登录流程。效果如下抽奖流程一、主要内容(1)主要元件动态面板(2)重点旋转交互、随机函数、触发动作。(3)难点通过停止位置判断抽奖结果(4)涉及函数及解释target目标元件text元件文本Math.random返回0-1之间的一个数字rotation元件旋转角度二、原型准备主要包含两个页面(1)框架页面包含手机边框内联框架主要用于将内容调入当前页面展示整体效果。双击内联框架选中index(内容)页面把内容页面引用到内联框架中。(2)内容页面包含作品全部元件内容。(提示内容默认隐藏)。三、原型拆解说明(1)转盘由两大部分组成背板按钮旋转部分与按钮指针分开方便添加交互对背板命名为zhuanpan。(2)剩余次数数字为单独的文本标签这样方便对数字进行运算。数字3命名为cishu(3)抽奖结果动态面板拆分说明抽奖结果动态面板包含四个面板状态并分别对应转盘上的四个奖项。动态面板命名为jiangpin默认设置隐藏。四、交互动作1. 【开始抽奖】按钮交互鼠标单击时添加判断如果次数(cishu)元件值大于0执行旋转次数减1等交互当次数(cishu)值小于0显示提示信息2秒后隐藏。交互设置旋转角度表达式[[Math.random()*3603600]]从0-1中随机产生一个数字(乘以360)这样在360度中任意得到一个角度加3600是让转盘至少能转10圈然后再任意停止到一个度数上。次数交互设置target.text-1表示用次数(cishu)文本减1。禁用当前元件[开始抽奖]避免重复单击按钮影响次数文本递减、以及转盘重复旋转。等待10010毫秒为了能在旋转结束以后再出抽奖结果。所以这个时间可以等于或稍大一点旋转的时间。显示奖品(jiangpin)动态面板将隐藏的奖品(jiangpin)动态面板显示出来。触发事件因为需要在旋转结束以后判断旋转的角度给出具体的抽奖结果。但因在交互动事件中没有旋转结束时事件所以需要把交互写到奖品(jiangpin)动态面板上通过触发事件来触发jiangpin动态面板相应的事件产生抽奖的结果。(当前以把判断过程交互写在动态面板载入时为例所以触发的是奖品(jiangpin)元件的载入时事件)。抽奖判断结果交互见下启用当前元件[开始抽奖]这样才可以继续点击抽奖。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 协议
