輪盤抽獎在各種App和網頁的活動頁面中經常使用，如何才能方便的設計出抽獎頁面呢？

原型分析

流程分析：點擊“抽獎”按鈕后，輪盤轉動足夠多圈數后停下

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

實現步驟

元件的層次

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

觸發旋轉事件

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

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

角度的設置

既要轉夠足夠圈數，又要有隨機性。

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

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

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

按下”F5″來鑒定下自己的血統吧=w=。

本文由 @YoSha 原創發布于人人都是產品經理。未經許可，禁止轉載。