Axure 8.0小技巧:快速制作簡單轉盤

2 評論 22547 瀏覽 62 收藏 3 分鐘

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

原型分析

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

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

QQ截圖20161107132511

實現步驟

元件的層次

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

觸發旋轉事件

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

QQ截圖20161107140932

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

角度的設置

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

足夠圈數:我們假設5圈,那就是360*5=1800°;

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

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

QQ截圖20161107141504

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

 

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 這個是只有8.0才有的吧

    回復
  2. 大家要是需要轉盤也轉記得把轉盤放在動態面板里,兩個動畫要一致,比如都是搖擺,不然很怪異

    來自江蘇 回復