編輯導(dǎo)語(yǔ)：滾動(dòng)抽獎(jiǎng)在我們?nèi)粘：艹Ｒ?jiàn)，但是很多人在Axure上可能就不知道如何實(shí)現(xiàn)這一功能。作者詳細(xì)分享了相關(guān)高保真滾動(dòng)抽獎(jiǎng)的步驟以及注意點(diǎn)，幫助你更好地完成這一項(xiàng)目，一起來(lái)看下吧。

看一下這次我們想要實(shí)現(xiàn)的效果：

看過(guò)效果之后我們?cè)俅_認(rèn)一下我們要實(shí)現(xiàn)的幾個(gè)功能：

1. 點(diǎn)擊“開(kāi)始抽獎(jiǎng)”，在名單中隨機(jī)抽取一位中獎(jiǎng)人，并有閃爍切換的滾動(dòng)效果。
2. 點(diǎn)擊“再抽一次”，會(huì)開(kāi)啟新一輪的抽獎(jiǎng)，并且不包含上一輪抽中的中獎(jiǎng)人。
3. 全部人員都抽取完后，可以點(diǎn)擊“重新開(kāi)始”開(kāi)啟新一輪的抽獎(jiǎng)，會(huì)重新將全部名單加載進(jìn)來(lái)。

那么，我們提煉一下幾個(gè)重點(diǎn)：

• 人員名單，如何存放人員名單；
• 隨機(jī)，如何實(shí)現(xiàn)隨機(jī)抽?。?/li>
• 切換，如何實(shí)現(xiàn)在候選人之間閃爍切換；
• 如何實(shí)現(xiàn)開(kāi)始切換，以及停止切換（抽中候選人）；
• 不包含，如何排除上一輪已中獎(jiǎng)名單。

如何存放人員名單：使用中繼器，在頁(yè)面加載時(shí)，添加一個(gè)動(dòng)作添加行。

如何實(shí)現(xiàn)隨機(jī)抽取：給每個(gè)人員一個(gè)隨機(jī)編碼，然后進(jìn)行排序，候選人的排序就被打亂了，就可以做到隨機(jī)的效果。

如何實(shí)現(xiàn)閃爍切換：中繼器設(shè)置分頁(yè)，一頁(yè)僅顯示一行信息，那么只要實(shí)現(xiàn)一定時(shí)間后翻到下一頁(yè)就可以實(shí)現(xiàn)切換了。

那么怎么實(shí)現(xiàn)循環(huán)切換呢？因?yàn)橐话闱闆r下頁(yè)面翻到最后一頁(yè)，就會(huì)停止了。那么我們就要在它翻到最后一頁(yè)的時(shí)候再添加一個(gè)動(dòng)作，就是跳到第一頁(yè)，這樣就可以從第一頁(yè)開(kāi)始繼續(xù)往后翻頁(yè)了。

如何實(shí)現(xiàn)開(kāi)始抽獎(jiǎng)和停止抽獎(jiǎng)？

翻譯過(guò)來(lái)就是，怎么讓中繼器不停翻頁(yè)，并在想要的時(shí)候停下。

那么我們就要設(shè)置一個(gè)全局變量，我給它命名為 StopOrStart，它將會(huì)有兩種賦值就是start和stop。

當(dāng)這個(gè)值不等于stop的時(shí)候，中繼器就一直翻頁(yè)。那就要考慮什么動(dòng)作能一直出發(fā)翻頁(yè)。這個(gè)仿佛是一個(gè)公式一樣，基本就是當(dāng)狀態(tài)改變，當(dāng)文本改變時(shí)。正好我們中繼器里需要有姓名、手機(jī)號(hào)，這兩樣就可以用文本框，文本框就有當(dāng)文本改變時(shí)的交互。

另外這里很好的一個(gè)點(diǎn)是不同的人可能有相同的姓名，但手機(jī)號(hào)肯定不一樣。所以我們?cè)趯?duì)顯示手機(jī)號(hào)的文本框上添加文本改變時(shí)的交互。翻譯一下就是，當(dāng)顯示手機(jī)號(hào)的文本框改變時(shí)，只要全局變量StopOrStart不等于Stop，就不斷地翻頁(yè)。

那么讓它停下來(lái)就簡(jiǎn)單了，就是讓全局變量在你需要的時(shí)候讓它變成是Stop就好了。我在這個(gè)原型中設(shè)置了過(guò)三秒全局變量等于Stop，那么也可以是當(dāng)點(diǎn)擊某個(gè)按鈕的時(shí)候全局變量等于Stop，翻頁(yè)就停止了，那么當(dāng)前頁(yè)就算是抽中的人選了。

那么翻頁(yè)停止后，又如何啟動(dòng)抽獎(jiǎng)呢？只要觸發(fā)某個(gè)動(dòng)作時(shí)讓中繼器開(kāi)始翻到下一頁(yè)，文本框改變了，就又會(huì)觸發(fā)不停翻頁(yè)了。

如何在下一輪抽獎(jiǎng)的時(shí)候排除之前的中獎(jiǎng)人員。

再下一次抽獎(jiǎng)之前，將當(dāng)前頁(yè)面的人員刪除。此時(shí)手機(jī)號(hào)碼的唯一性又派上用場(chǎng)了，刪除中繼器中手機(jī)號(hào)碼等于當(dāng)前文本框中的文本信息的行即可。

以上就是本原型的核心邏輯啦。

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

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