輪盤抽獎在各種App和網(wǎng)頁的活動頁面中經(jīng)常使用，如何才能方便的設(shè)計出抽獎頁面呢？

原型分析

流程分析：點擊“抽獎”按鈕后，輪盤轉(zhuǎn)動足夠多圈數(shù)后停下

必備元素分析：指針圖片、輪盤圖片（筆者是用Axure自帶的橢圓形和鋼筆工具隨手畫的）、抽獎按鈕。

實現(xiàn)步驟

元件的層次

指針在頂層、輪盤在底層，通過”右擊圖片->順序”來改變層次。

觸發(fā)旋轉(zhuǎn)事件

一句話描述抽獎過程：點擊按鈕后，什么圖片圍繞什么點?平滑地用多長時間轉(zhuǎn)動了多少角度

注：動畫可以自行選擇，只要不選”無”就能有過程動畫。

角度的設(shè)置

既要轉(zhuǎn)夠足夠圈數(shù)，又要有隨機(jī)性。

足夠圈數(shù)：我們假設(shè)5圈，那就是360*5=1800°；

隨機(jī)性：我們選擇使用”Math.random()”函數(shù)來產(chǎn)生隨機(jī)值(該函數(shù)產(chǎn)生0到1之間的隨機(jī)數(shù))，所以我們用“360*Math.random()”來滿足隨機(jī)部分(0~360°)。

下面我們設(shè)置角度函數(shù): ?[[1800+360*Math.random()]]

按下”F5″來鑒定下自己的血統(tǒng)吧=w=。

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