中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

效果如下：

抽獎流程

一、主要內容

（1）主要元件：動態面板

（2）重點：旋轉交互、隨機函數、觸發動作。

（3）難點：通過停止位置判斷抽獎結果

（4）涉及函數及解釋：

1. target：目標元件
2. text：元件文本
3. Math.random()：返回0-1之間的一個數字
4. rotation：元件旋轉角度

二、原型準備：主要包含兩個頁面

（1）框架頁面

包含手機邊框+內聯框架，主要用于將內容調入當前頁面，展示整體效果。

雙擊內聯框架，選中index（內容）頁面，把內容頁面引用到內聯框架中。

（2）內容頁面

包含作品全部元件內容。（提示內容默認隱藏）。

三、原型拆解說明

（1）轉盤

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

（2）剩余次數

數字為單獨的文本標簽，這樣方便對數字進行運算。數字3命名為：cishu

（3）抽獎結果動態面板拆分說明

抽獎結果動態面板包含四個面板狀態，并分別對應轉盤上的四個獎項。動態面板命名為：jiangpin，默認設置隱藏。

四、交互動作

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

鼠標單擊時：添加判斷如果次數（cishu）元件值大于0，執行旋轉，次數減1等交互；當次數（cishu）值小于0，顯示提示信息，2秒后隱藏。

交互設置：

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

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 協議