雷迪絲and枕頭們，歡迎來(lái)到星光大道……sorry，拿錯(cuò)題詞卡了，重來(lái)

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

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

預(yù)覽地址

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

工作原理

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

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

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

如果進(jìn)行下一輪抽獎(jiǎng)的話，只需要執(zhí)行相同的操作即可。但這其中會(huì)有一個(gè)過(guò)程，就是下一輪抽獎(jiǎng)會(huì)排除掉之前的中獎(jiǎng)?wù)撸瑸榱朔乐雇粋€(gè)人重復(fù)中獎(jiǎng)。

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

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

帶著這些問(wèn)題，我們開(kāi)始原型的制作過(guò)程。

制作過(guò)程

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

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

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

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

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

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

② 在文本框上設(shè)置文本改變時(shí)對(duì)中繼器翻頁(yè)的事件及動(dòng)作

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

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

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

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

PART3：從被抽獎(jiǎng)人信息中刪除中獎(jiǎng)人信息（中繼器）

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

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

PART4：按下鍵盤(pán)任意鍵開(kāi)始/停止抽獎(jiǎng)的邏輯判斷

按下任意鍵的場(chǎng)景基本可以分為三種情況：

1. 第一次開(kāi)始抽獎(jiǎng)時(shí)：Case1，此時(shí)主要是啟動(dòng)抽獎(jiǎng)程序，顯示被抽獎(jiǎng)人信息并快速閃爍切換
2. 停止抽獎(jiǎng)時(shí)：Case3，此時(shí)主要是停止抽獎(jiǎng)程序，并固定顯示中間人信息
3. 第N次（N>1）抽獎(jiǎng)時(shí)：Case2，此時(shí)是刪除Case2過(guò)程抽出的中獎(jiǎng)人信息后，再進(jìn)入下一輪抽獎(jiǎng)

以上就是抽獎(jiǎng)案例的主要邏輯及實(shí)現(xiàn)過(guò)程。

總結(jié)

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

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