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

編輯導(dǎo)語：隨著商業(yè)的發(fā)展，在ToC系統(tǒng)中，抽獎是必備的一項功能。那么，對于這么高頻使用的功能，如何用Axure做一個既美觀且復(fù)用性又強(qiáng)的抽獎原型？作者分享了相關(guān)步驟，希望對你有所幫助。

隨著商業(yè)的進(jìn)步與發(fā)展，在To C的系統(tǒng)里面，抽獎可以說是必備的功能。

所以我們今天來學(xué)習(xí)，在Axure里面做一個最一個既美觀，而且復(fù)用性又強(qiáng)的抽獎原型，完成后效果如下圖所示：

原型地址：https://br9e4z.axshare.com/#g=1

一、材料準(zhǔn)備

1. 中繼器

這次教程主要是通過中繼器制作，因為中繼器有很強(qiáng)的復(fù)用性，制作完成之后，只需要再中繼器表格中維護(hù)獎品信息，既可以自動生成交互效果

布局：為水平分布，每行項目數(shù)為5；

中繼器內(nèi)部所需元件：

內(nèi)部矩形：設(shè)置選中樣式為藍(lán)色（抽獎過程中閃爍效果），禁用樣式的為橙色（抽完成后抽中的效果）。

圖片元件：獎品的圖片內(nèi)容，后續(xù)通過設(shè)置圖片的交互，將中繼器里的圖片設(shè)置到該元件里。

文本標(biāo)簽：獎品的文字內(nèi)容，后續(xù)通過設(shè)置文本的交互，將中繼器里的獎品文字設(shè)置到該元件里。

將內(nèi)部矩形、圖片元件和文本標(biāo)簽組合在一起，如下圖所示放置在中繼器內(nèi)。

中繼器內(nèi)部表格設(shè)置：

中繼器表格內(nèi)共需要設(shè)置5列，如效果所示：

no列：序號列，為按12345……填寫，后續(xù)隨機(jī)抽取的時候會用到序號；

text列：文字列，對應(yīng)的是文本標(biāo)簽的內(nèi)容，這里填寫?yīng)勂沸畔⒓纯桑?/p>

pic列：圖片列，右鍵導(dǎo)入本地圖片，或者填寫圖片的在線地址均可；

xuanzhong列：默認(rèn)為空即可，只用于抽獎過程中的邏輯處理。

jinyong列：默認(rèn)為空即可，只用于抽獎完成后獎品背景變色的邏輯處理。

2. 按鈕

抽獎的按鈕，按鈕樣式你們根據(jù)自身需求設(shè)計即可。

3. 文本標(biāo)簽

需要增加兩個文本，只用于邏輯處理，默認(rèn)隱藏

• 次數(shù)文本：用于記錄抽簽是閃爍效果的次數(shù)
• 記錄文本：用于記錄閃爍的位置，默認(rèn)值為1

二、交互制作

1. 中繼器每項加載時交互

首先我們要將中繼器里關(guān)于獎品的信息（文字和圖片）設(shè)置到對應(yīng)的元件里

設(shè)置文本：將item.text的內(nèi)容設(shè)置的中繼器里的文本標(biāo)簽（獎品的文字內(nèi)容）

設(shè)置圖片：將item.pic的內(nèi)容設(shè)置的中繼器里的圖片元件（獎品的圖片）

然后我們需要分情況來設(shè)置，如果xuanzhong的值為1：

設(shè)置選中：那么我們就需要選擇背景矩形讓他變色，我們是通過中繼器的值來控制背景矩形的狀態(tài)的，如果xuanzhong列的值為1，即選中變色，如果不等于1，就不會選中

設(shè)置文本：這里我們還需要設(shè)置記錄文本，設(shè)置為item.no+1，item.no是當(dāng)前的序號，加一代表我這個已經(jīng)閃爍完成了，記錄下一個要閃爍的獎品的no

接下來我們設(shè)置禁用的事件，和選中的事件差不多，如果jinyong的值為1，那么就禁用背景矩形，如果不是1的情況，我們可以不用寫，因為本來默認(rèn)就不是1的情況，當(dāng)然了你也可以寫上如果禁用不等于1，啟用背景矩形，不過這里寫不寫都是一樣的，沒必要浪費時間。

最后，我們還要做一個循環(huán)，需要考慮的是，如果是在最后一行，選中的時候設(shè)置記錄文本為序號+1那肯定是錯誤的，最后一行的時候應(yīng)該設(shè)置記錄文本為1，這樣才能循環(huán)閃爍。

如果tem.isLast為真，而且xuanzhong的值=1，我們就是設(shè)置記錄文本的值為1。

那這樣，中繼器內(nèi)的交互就完成了，接下來，我們制作抽獎循環(huán)的交互。

2. 次數(shù)文本載入時交互

次數(shù)文本是用來控制抽獎過程中閃爍的次數(shù)，因為抽獎的隨機(jī)的，所以我們在元件載入時，設(shè)置次數(shù)文本為隨機(jī)數(shù)。這里我們用到隨機(jī)函數(shù)math.random，他可以從0到1中任意取一個數(shù)，然后我們希望控制閃爍的次數(shù)在20到40次之間所以我們用隨機(jī)函數(shù)的結(jié)果*20+20，就可以控制了，最后記得需要用fixed函數(shù)來四舍五入。

3. 抽獎按鈕鼠標(biāo)單擊時交互

這里是需要分兩種情況，第一種是次數(shù)文本>0的情況：

鼠標(biāo)單擊按鈕以后，我們要首先禁用掉當(dāng)前按鈕，為了防止重復(fù)點擊而出現(xiàn)的問題

然后我們標(biāo)記中繼器里的所有行，然后更新已標(biāo)記的行，即更新所有行，將所有行里面的xuanzhong列和jinyong列的值都改為0，這里可以理解成全部獎品的背景設(shè)置為默認(rèn)顏色。

然后我們再更新行，更新的邏輯是no列的序號==記錄文本，將這一行的xuanzhong列的值更新為1。這樣我們就可以保證每次只會選中1個，而且選中這個之后又會自動設(shè)置記錄文本+1，從而實現(xiàn)循環(huán)。

這里我們設(shè)置一個等待的時間，就是每個獎品選中顯示藍(lán)色背景的時間，案例中是0.1秒，大家可以根據(jù)實際來設(shè)置。

這樣完成以后，我們設(shè)置次數(shù)文本為他原來的值-1，然后在觸發(fā)當(dāng)前按鈕鼠標(biāo)單擊時事件。例如剛開始隨機(jī)出來的數(shù)字是20，那么他就會一直不斷的循環(huán)在轉(zhuǎn)，20到19到18……到0，才會停止

當(dāng)次數(shù)文本變成0的時候，我們進(jìn)入下一中情況：

首先我們也是通過標(biāo)記所以行，更新所有行，將所有行里面的xuanzhong列和jinyong列的值都改為0，這一步和前面的都是一樣的。

然后我們再更新行，更新的邏輯是no列的序號==記錄文本，這里注意，這次更新是將這一行的jinyong列的值更新為1。這樣就會有一個變成橙色，就是抽中的鍵盤了。

按道理來說這樣就完成了整個抽獎的流程，后面我們就要為下一次抽獎準(zhǔn)備

因為開始抽獎的時候禁用了按鈕，所以這里我們要重新啟用抽獎按鈕。

然后我們重新隨機(jī)抽取閃爍的次數(shù)，因為之前是次數(shù)文本在載入時通過隨機(jī)函數(shù)來設(shè)置的，所以這個我們直接觸發(fā)隨機(jī)文本觸發(fā)時事件即可。

樣，我們就完成了隨機(jī)抽獎的原型模板了，以后使用的話，我們可以直接在中繼器表格中維護(hù)獎品信息，就能自動生成交互，是不是很方便快捷呢？

那以上就是本期的全部內(nèi)容了，感謝您的閱讀，我們下期見，88~~~

本文由 @做產(chǎn)品但不是經(jīng)理 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

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