本文跟大家分享，如何使用axure制作轉(zhuǎn)盤(pán)抽獎(jiǎng)交互原型，不帶登錄流程。

效果如下：

抽獎(jiǎng)流程

一、主要內(nèi)容

（1）主要元件：動(dòng)態(tài)面板

（2）重點(diǎn)：旋轉(zhuǎn)交互、隨機(jī)函數(shù)、觸發(fā)動(dòng)作。

（3）難點(diǎn)：通過(guò)停止位置判斷抽獎(jiǎng)結(jié)果

（4）涉及函數(shù)及解釋?zhuān)?/p>

1. target：目標(biāo)元件
2. text：元件文本
3. Math.random()：返回0-1之間的一個(gè)數(shù)字
4. rotation：元件旋轉(zhuǎn)角度

二、原型準(zhǔn)備：主要包含兩個(gè)頁(yè)面

（1）框架頁(yè)面

包含手機(jī)邊框+內(nèi)聯(lián)框架，主要用于將內(nèi)容調(diào)入當(dāng)前頁(yè)面，展示整體效果。

雙擊內(nèi)聯(lián)框架，選中index（內(nèi)容）頁(yè)面，把內(nèi)容頁(yè)面引用到內(nèi)聯(lián)框架中。

（2）內(nèi)容頁(yè)面

包含作品全部元件內(nèi)容。（提示內(nèi)容默認(rèn)隱藏）。

三、原型拆解說(shuō)明

（1）轉(zhuǎn)盤(pán)

由兩大部分組成，背板+按鈕，旋轉(zhuǎn)部分與按鈕指針?lè)珠_(kāi)，方便添加交互，對(duì)背板命名為：zhuanpan。

（2）剩余次數(shù)

數(shù)字為單獨(dú)的文本標(biāo)簽，這樣方便對(duì)數(shù)字進(jìn)行運(yùn)算。數(shù)字3命名為：cishu

（3）抽獎(jiǎng)結(jié)果動(dòng)態(tài)面板拆分說(shuō)明

抽獎(jiǎng)結(jié)果動(dòng)態(tài)面板包含四個(gè)面板狀態(tài)，并分別對(duì)應(yīng)轉(zhuǎn)盤(pán)上的四個(gè)獎(jiǎng)項(xiàng)。動(dòng)態(tài)面板命名為：jiangpin，默認(rèn)設(shè)置隱藏。

四、交互動(dòng)作

1. 【開(kāi)始抽獎(jiǎng)】按鈕交互

鼠標(biāo)單擊時(shí)：添加判斷如果次數(shù)（cishu）元件值大于0，執(zhí)行旋轉(zhuǎn)，次數(shù)減1等交互；當(dāng)次數(shù)（cishu）值小于0，顯示提示信息，2秒后隱藏。

交互設(shè)置：

1. 旋轉(zhuǎn)角度表達(dá)式：[[Math.random()*360+3600]]，從0-1中隨機(jī)產(chǎn)生一個(gè)數(shù)字（乘以360），這樣在360度中任意得到一個(gè)角度；加3600，是讓轉(zhuǎn)盤(pán)至少能轉(zhuǎn)10圈，然后再任意停止到一個(gè)度數(shù)上。
2. 次數(shù)交互設(shè)置：target.text-1，表示用次數(shù)（cishu）文本減1。
3. 禁用當(dāng)前元件[開(kāi)始抽獎(jiǎng)]：避免重復(fù)單擊按鈕，影響次數(shù)文本遞減、以及轉(zhuǎn)盤(pán)重復(fù)旋轉(zhuǎn)。
4. 等待10010毫秒：為了能在旋轉(zhuǎn)結(jié)束以后，再出抽獎(jiǎng)結(jié)果。所以這個(gè)時(shí)間可以等于或稍大一點(diǎn)旋轉(zhuǎn)的時(shí)間。
5. 顯示獎(jiǎng)品（jiangpin）動(dòng)態(tài)面板：將隱藏的獎(jiǎng)品（jiangpin）動(dòng)態(tài)面板顯示出來(lái)。
6. 觸發(fā)事件：因?yàn)樾枰谛D(zhuǎn)結(jié)束以后，判斷旋轉(zhuǎn)的角度，給出具體的抽獎(jiǎng)結(jié)果。但因在交互動(dòng)事件中，沒(méi)有旋轉(zhuǎn)結(jié)束時(shí)事件；所以需要把交互寫(xiě)到獎(jiǎng)品（jiangpin）動(dòng)態(tài)面板上，通過(guò)觸發(fā)事件來(lái)觸發(fā)jiangpin動(dòng)態(tài)面板相應(yīng)的事件，產(chǎn)生抽獎(jiǎng)的結(jié)果。（當(dāng)前以把判斷過(guò)程交互，寫(xiě)在動(dòng)態(tài)面板載入時(shí)為例，所以觸發(fā)的是獎(jiǎng)品（jiangpin）元件的載入時(shí)事件）。抽獎(jiǎng)判斷結(jié)果交互見(jiàn)下
7. 啟用當(dāng)前元件[開(kāi)始抽獎(jiǎng)]：這樣才可以繼續(xù)點(diǎn)擊抽獎(jiǎng)。

2. 獎(jiǎng)品動(dòng)態(tài)面板交互

把抽獎(jiǎng)結(jié)果交互寫(xiě)在獎(jiǎng)品（jiangpin）動(dòng)態(tài)面板的任何事件都可，當(dāng)前以寫(xiě)在載入時(shí)為例。

因?yàn)檗D(zhuǎn)盤(pán)上有4個(gè)獎(jiǎng)項(xiàng)區(qū)間，每個(gè)區(qū)間90度范圍；停止后，用最終旋轉(zhuǎn)的度數(shù)除以360度，取余數(shù)，就能判斷在轉(zhuǎn)盤(pán)相應(yīng)的位置，然后再輸出相應(yīng)獎(jiǎng)項(xiàng)（設(shè)置面板狀態(tài)）。

其中，需將else if，轉(zhuǎn)換為if。

添加條件的具體設(shè)置見(jiàn)下：

表達(dá)式說(shuō)明（[[LVAR1.rotation%360]]）：獲取轉(zhuǎn)盤(pán)（zhuanpan）旋轉(zhuǎn)角度，取余360。得到最終停止的角度。

3. 【確認(rèn)收下】按鈕交互

鼠標(biāo)單擊時(shí)：隱藏獎(jiǎng)品（jiangpin）動(dòng)態(tài)面板。

五、整理

將jiangpin動(dòng)態(tài)面板、提示（tishi）元件移入內(nèi)容區(qū)域垂直劇中對(duì)齊；全選所以內(nèi)容，將坐標(biāo)改到（0,0）原點(diǎn)。

最后回到框架頁(yè)面，預(yù)覽一下整體效果。

原型下載：鏈接:https://pan.baidu.com/s/1jqNv5xZgkuUNF9nJkeR9Tw 密碼:66l4

本文由 @松林放牛娃 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Pexels，基于 CC0 協(xié)議