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

效果如下：

抽獎流程

一、主要內(nèi)容

(1)主要元件：動態(tài)面板

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

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

(4)涉及函數(shù)及解釋：

target：目標(biāo)元件

text：元件文本

Math.random：返回0-1之間的一個數(shù)字

rotation：元件旋轉(zhuǎn)角度

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

(1)框架頁面

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

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

(2)內(nèi)容頁面

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

三、原型拆解說明

(1)轉(zhuǎn)盤

由兩大部分組成，背板+按鈕，旋轉(zhuǎn)部分與按鈕指針分開，方便添加交互，對背板命名為：zhuanpan。

(2)剩余次數(shù)

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

(3)抽獎結(jié)果動態(tài)面板拆分說明

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

四、交互動作

1. 【開始抽獎】按鈕交互

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

交互設(shè)置：

旋轉(zhuǎn)角度表達(dá)式：[[Math.random()*360+3600]]，從0-1中隨機(jī)產(chǎn)生一個數(shù)字(乘以360)，這樣在360度中任意得到一個角度；加3600，是讓轉(zhuǎn)盤至少能轉(zhuǎn)10圈，然后再任意停止到一個度數(shù)上。

次數(shù)交互設(shè)置：target.text-1，表示用次數(shù)(cishu)文本減1。

禁用當(dāng)前元件[開始抽獎]：避免重復(fù)單擊按鈕，影響次數(shù)文本遞減、以及轉(zhuǎn)盤重復(fù)旋轉(zhuǎn)。

等待10010毫秒：為了能在旋轉(zhuǎn)結(jié)束以后，再出抽獎結(jié)果。所以這個時間可以等于或稍大一點(diǎn)旋轉(zhuǎn)的時間。

顯示獎品(jiangpin)動態(tài)面板：將隱藏的獎品(jiangpin)動態(tài)面板顯示出來。

觸發(fā)事件：因為需要在旋轉(zhuǎn)結(jié)束以后，判斷旋轉(zhuǎn)的角度，給出具體的抽獎結(jié)果。但因在交互動事件中，沒有旋轉(zhuǎn)結(jié)束時事件；所以需要把交互寫到獎品(jiangpin)動態(tài)面板上，通過觸發(fā)事件來觸發(fā)jiangpin動態(tài)面板相應(yīng)的事件，產(chǎn)生抽獎的結(jié)果。(當(dāng)前以把判斷過程交互，寫在動態(tài)面板載入時為例，所以觸發(fā)的是獎品(jiangpin)元件的載入時事件)。抽獎判斷結(jié)果交互見下

啟用當(dāng)前元件[開始抽獎]：這樣才可以繼續(xù)點(diǎn)擊抽獎。

2. 獎品動態(tài)面板交互

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

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

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

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

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

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

鼠標(biāo)單擊時：隱藏獎品(jiangpin)動態(tài)面板。

五、整理

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

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

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

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

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

總結(jié)

以上是生活随笔為你收集整理的axure 内部框架内容下滑_Axure教程：转盘抽奖交互原型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。