雷迪絲and枕頭們，歡迎來到星光大道……sorry，拿錯題詞卡了，重來

（XX公司年會暨春節(jié)聯(lián)歡晚會現(xiàn)場）女士們，先生們，接下來就是萬眾期待、摩拳擦掌、蠢蠢欲動、心驚膽戰(zhàn)、激動萬分、哀號遍野……的幸運大抽獎環(huán)節(jié)……廢話不多說，請看大屏幕（下圖）……

OK，不賣關(guān)子了，想必看到這里，小伙伴們已經(jīng)明白我說的這個Axure原型是個何方妖孽，竟能登上春晚（我可沒說是央視）舞臺了吧。是的，就是一款年會抽獎程序，你可千萬別把它當成是只會招搖撞騙、擺擺架子的低能原型。它是真的可以在年會現(xiàn)場作為抽獎系統(tǒng)來用的，當然年會用的功能可能要比我展示的原型復(fù)雜一些，但是只要是類似的工作原理，基本也能實現(xiàn)；另外如果這個抽獎原型功能上可以滿足你的需求，那么只需要替換一下抽獎數(shù)據(jù)庫（其實就是中繼器里的數(shù)據(jù)項，換成你所需要的）就可以了。

預(yù)覽地址

說到這里，先給大家奉上原型預(yù)覽地址：http://www.raedme.cn/axurelab/006_choujiang/，接下來我再和感興趣的小伙伴細細聊這原型中的子丑寅卯。

工作原理

這個抽獎程序的工作原理其實非常簡單，并且大家應(yīng)該都見過類似的東西，不過在此我還是再贅述一下。

首先打開抽獎頁面，然后按下鍵盤上的任意鍵（也可設(shè)置為指定鍵）開始抽獎，此時屏幕上會快速閃現(xiàn)被抽獎人信息；

然后再次按下鍵盤上的任意鍵或指定鍵，抽出中獎?wù)撸ù藭r被抽獎人的信息不再閃爍切換，而是固定顯示為中獎人信息）。這樣就完成了一輪抽獎。

如果進行下一輪抽獎的話，只需要執(zhí)行相同的操作即可。但這其中會有一個過程，就是下一輪抽獎會排除掉之前的中獎?wù)?，為了防止同一個人重復(fù)中獎。

根據(jù)這個原理，我們可以明確在制作原型的過程中需要解決哪些問題，如下：

1. 被抽獎人信息如何存放
2. 如何實現(xiàn)被抽獎人信息的快速閃爍切換
3. 如何從被抽獎人信息中刪除中獎人信息
4. 按下鍵盤任意鍵開始/停止抽獎的邏輯判斷

帶著這些問題，我們開始原型的制作過程。

制作過程

用到的axure元件：中繼器、文本框

PART1：創(chuàng)建被抽獎人數(shù)據(jù)庫（中繼器）

用中繼器來存儲被抽獎人的信息，這個操作非常簡單，只需要添加一個中繼器元件，然后在中繼器中的數(shù)據(jù)集中添加相應(yīng)的被抽獎人數(shù)據(jù)即可。不過本案例中被抽獎人的數(shù)據(jù)并不是一開始就存放在中繼器中，而是動態(tài)添加進去的，也就是在抽獎頁面加載的時候，向中繼器中添加數(shù)據(jù)，并且為中繼器中的數(shù)據(jù)進行排序，排序字段是一個隨機數(shù)。這樣就保證了及時向中繼器中插入數(shù)據(jù)時候是有順序的，但是中繼器一排序，就會將之前原有的順序打亂，因為對于抽獎程序，這個是必須的。

PART2：實現(xiàn)被抽獎人信息的快速閃爍切換（中繼器、文本框）

閃爍切換的效果通過中繼器的分頁來實現(xiàn)，對中繼器進行分頁，每頁顯示一項數(shù)據(jù)，也就是一條被抽獎人信息。另外由于中繼器的翻頁動作需要有觸發(fā)事件，而連續(xù)的翻頁則需要連續(xù)的觸發(fā)事件，這里我采用一種可以循環(huán)執(zhí)行的事件來實現(xiàn)，就是通過文本框的文本改變時事件，文本框內(nèi)容改變時執(zhí)行一個動作，這個動作設(shè)置文本框的內(nèi)容使其發(fā)生改變，這樣就形成了一個循環(huán)。

① 設(shè)置中繼器分頁

② 在文本框上設(shè)置文本改變時對中繼器翻頁的事件及動作

這里需要注意一點：當翻到最后一頁的時候，需要再使其翻到第2頁（本案例中第1也為空白頁，不參與抽獎），所以這個過程需要一個單獨的判斷，就是 Case2 的內(nèi)容，當然這個是基于 Case1 的判斷條件之外的條件，也就是當中繼器中數(shù)據(jù)項的頁碼=總頁數(shù)的時候。

另外等待時間50ms用來控制閃爍切換的快慢，這個肯根據(jù)需要自行調(diào)整。

③ 如何連續(xù)觸發(fā)“文本改變時”這個事件

因為文本框顯示的是中繼器中的數(shù)據(jù)項，而中繼器中的每一條數(shù)據(jù)都是不同的，所以當中繼器翻頁的時候，就會觸發(fā)文本框上的“文本改變時”事件，也就是上述第②步的過程；但是還需要一個動作來觸發(fā)第一次，第一次之后就可以進入循環(huán)，這個動作其實就是按下鍵盤上的任意鍵，我放在后面講。

PART3：從被抽獎人信息中刪除中獎人信息（中繼器）

其實這個過程就是通過刪除中繼器中的數(shù)據(jù)項來實現(xiàn)的，即刪除當前抽出的中獎人數(shù)據(jù)；這個在進行刪除操作的時候需要做一個判斷，即被刪除的數(shù)據(jù)項的值等于當前顯示的中獎人的數(shù)據(jù)，這里需要用到局部變量來獲取當前顯示在文本框上的中獎人信息。

另外這個“刪除”的動作也是在按下任意鍵的時候執(zhí)行，在后面要介紹按下任意鍵的邏輯的時候也會看到相應(yīng)的設(shè)置。

PART4：按下鍵盤任意鍵開始/停止抽獎的邏輯判斷

按下任意鍵的場景基本可以分為三種情況：

1. 第一次開始抽獎時：Case1，此時主要是啟動抽獎程序，顯示被抽獎人信息并快速閃爍切換
2. 停止抽獎時：Case3，此時主要是停止抽獎程序，并固定顯示中間人信息
3. 第N次（N>1）抽獎時：Case2，此時是刪除Case2過程抽出的中獎人信息后，再進入下一輪抽獎

以上就是抽獎案例的主要邏輯及實現(xiàn)過程。

總結(jié)

本案例的核心其實是“中繼器”結(jié)合“文本框”的用法。在該案例中文本框除了用于顯示中繼器中的數(shù)據(jù)項，還有一個重要的功能就是利用“文本改變時”這一事件來實現(xiàn)循環(huán)，而且很多地方都可以用到這種方式。那么我的經(jīng)驗就是要了解不同部件所特有的一些事件，然后加以利用，實現(xiàn)想要的效果。

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