轉盤抽獎是營銷活動中很常用的一種方式，在線上也經常能看到轉盤抽獎的活動。本文作者分享了在Axure中制作一個轉盤抽獎原型模闆的方式，一起來學習一下吧。

轉盤抽獎是營銷活動中很常用的一種方式，在線上我們也可以經常看到轉盤抽獎的活動，所以今天作者就教大家在Axure中怎麼制作一個轉盤抽獎的原型模闆。

一、效果展示

1、可以随機轉動輪盤，輪盤停止時，指針對着的獎品高亮顯示；

2、可以重複多次開始抽獎，每次抽中的獎品都是随機的。

二、制作教程

1. 材料準備

我們制作這個輪盤我們主要用到文字元件、圖片元件、圓形元件、扇形元件、指針形狀。

1）1外圈的制作

外圈其實就是一個大的圓形和多個小的圓形組成，具體擺放可以參考下圖。

2）獎品區域的制作

獎品區域我們主要用扇形來制作，根據獎品的數量，例如案例中獎品是10個，那就用360°/10=36°，得出一個扇形的角度為36°。然後我們用多個扇形通過旋轉拼在一起就可以一個圓。所有的傘形我們要增加一個選中的填充顔色，這樣我們才知道最後是抽中了那個獎品。

我們設置每個扇形的顔色，可以用多個建設間隔開，然後擺上獎品的文字和圖片，每個獎品的文字和圖片根據扇形的文字設置對應角度的旋轉。

最後我們也可以增加一個圓環，圓環，設置為透明的淺藍色，這樣文字那裡的顔色就會和其他區域有所不同，更加的美觀。

3）指針的的制作

指針其實就是多個圓形和針行組合在一起，最外賣是灰色透明的原，然後是一個紅色的圓，再将針行放在圓的上方，然後用一個小圓，增加内部陰影，放在上方，最後加一個小圓，添加開始的文字，添加外部陰影，這樣整個指針就有立體的效果了。

我們把最好的部分組合放在一起完成整個輪盤外觀的制作。

2. 交互制作

鼠标單擊開始按鈕時，我們首先要随機獲取一個旋轉的交互，這裡我們用random函數就可以獲取一個0-1之間的數，我們将它乘以360°，就可以獲得一個0到360度裡的随機數。這樣在最後圈時，我們就根據這個随機數控制輪盤旋轉多少度。我們增加一個默認隐藏的文本記錄這個随機角度。

然後我們還要增加一個默認隐藏的文本的文本記錄旋轉的圈數，一開始默認要轉幾圈的動畫，就轉幾圈就可以了，例如默認要轉3圈，就設置1080。

所以點擊開始按鈕後，到最後停止的到達角度，就是随機角度 默認設置的記錄圈數，我們用旋轉事件，将他旋轉到這兩個之和的位置即可，旋轉的交互我們要增加動畫，以及動畫的時間，時間越短，轉速越快，這個你們可以根據需要設置。旋轉動畫可以選擇緩進緩出，開始轉和最後結束的時候比較慢，這種效果比較符合實際。

旋轉之後我們要加一個等待時間，等待旋轉結束，一般旋轉動畫時間是多少，等待時間就多少，但是考慮到不同的電腦會有适當的延時，具體等待時間可以輕微調整。

等待時間結束之後，我們要讓選中獎品對應的扇形高亮變色，這裡我們需要判斷，是哪個扇形區域的獎品被選中呢？這個我們根據記錄的随機函數可以判斷，如果随機角度是0-36°，因為一個扇形是36°，就是第一個扇形變色，我們用選中的交互将他選中即可，因為前面我們設置了選中樣式，選中了填充顔色就會變化，那一次類推，如果随機是36-72之間，就選中第二個，72-108之間就是第三個……

這是轉一次的交互，我們接下來要考慮轉多次的交互。

如果之前已經轉過一次，點擊開始按鈕的時候，我們就要先讓扇形變回原來的顔色，那我們用取消選中的交互就可以，我們把10所有扇形都取消選中，這樣就可以全部變回默認顔色。

第一次完成旋轉後，第二次要達到的角度就不是1080 随機角度了，因為第一次完成之後，所在的角度就是1080 随機角度，所以第二次我們應該旋轉到達的角度就是兩個1080 随機角度，其實就是每次轉完介紹都要加多一個固定轉的角度1080。我們用設置文本的交互，将記錄的圈數在加一次默認的圈數。

這樣就基本完成了，不過還要考慮在轉的期間，會不會有人多次點擊開始按鈕，所以我們在開始的時候，增加一個禁用按鈕的交互，在結束的時候，用啟用的交互防止這種情況的發生。

這樣我們就完成了轉盤抽獎原型模闆的制作了。以後使用基本上就是複制粘貼，然後替換一下獎品圖片和文字，就可以直接使用了，是不是很方便呢？

那以上就是本期教程的全部内容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。

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

題圖來自 Unsplash，基于 CC0 協議

該文觀點僅代表作者本人，人人都是産品經理平台僅提供信息存儲空間服務。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部