轉(zhuǎn)盤抽獎是營銷活動中很常用的一種方式，在線上也經(jīng)常能看到轉(zhuǎn)盤抽獎的活動。本文作者分享了在Axure中制作一個轉(zhuǎn)盤抽獎原型模板的方式，一起來學(xué)習(xí)一下吧。

轉(zhuǎn)盤抽獎是營銷活動中很常用的一種方式，在線上我們也可以經(jīng)?？吹睫D(zhuǎn)盤抽獎的活動，所以今天作者就教大家在Axure中怎么制作一個轉(zhuǎn)盤抽獎的原型模板。

一、效果展示

1、可以隨機(jī)轉(zhuǎn)動輪盤，輪盤停止時，指針對著的獎品高亮顯示；

2、可以重復(fù)多次開始抽獎，每次抽中的獎品都是隨機(jī)的。

二、制作教程

1. 材料準(zhǔn)備

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

1）1外圈的制作

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

2）獎品區(qū)域的制作

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

我們設(shè)置每個扇形的顏色，可以用多個建設(shè)間隔開，然后擺上獎品的文字和圖片，每個獎品的文字和圖片根據(jù)扇形的文字設(shè)置對應(yīng)角度的旋轉(zhuǎn)。

最后我們也可以增加一個圓環(huán)，圓環(huán)，設(shè)置為透明的淺藍(lán)色，這樣文字那里的顏色就會和其他區(qū)域有所不同，更加的美觀。

3）指針的的制作

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

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

2. 交互制作

鼠標(biāo)單擊開始按鈕時，我們首先要隨機(jī)獲取一個旋轉(zhuǎn)的交互，這里我們用random函數(shù)就可以獲取一個0-1之間的數(shù)，我們將它乘以360°，就可以獲得一個0到360度里的隨機(jī)數(shù)。這樣在最后圈時，我們就根據(jù)這個隨機(jī)數(shù)控制輪盤旋轉(zhuǎn)多少度。我們增加一個默認(rèn)隱藏的文本記錄這個隨機(jī)角度。

然后我們還要增加一個默認(rèn)隱藏的文本的文本記錄旋轉(zhuǎn)的圈數(shù)，一開始默認(rèn)要轉(zhuǎn)幾圈的動畫，就轉(zhuǎn)幾圈就可以了，例如默認(rèn)要轉(zhuǎn)3圈，就設(shè)置1080。

所以點擊開始按鈕后，到最后停止的到達(dá)角度，就是隨機(jī)角度+默認(rèn)設(shè)置的記錄圈數(shù)，我們用旋轉(zhuǎn)事件，將他旋轉(zhuǎn)到這兩個之和的位置即可，旋轉(zhuǎn)的交互我們要增加動畫，以及動畫的時間，時間越短，轉(zhuǎn)速越快，這個你們可以根據(jù)需要設(shè)置。旋轉(zhuǎn)動畫可以選擇緩進(jìn)緩出，開始轉(zhuǎn)和最后結(jié)束的時候比較慢，這種效果比較符合實際。

旋轉(zhuǎn)之后我們要加一個等待時間，等待旋轉(zhuǎn)結(jié)束，一般旋轉(zhuǎn)動畫時間是多少，等待時間就多少，但是考慮到不同的電腦會有適當(dāng)?shù)难訒r，具體等待時間可以輕微調(diào)整。

等待時間結(jié)束之后，我們要讓選中獎品對應(yīng)的扇形高亮變色，這里我們需要判斷，是哪個扇形區(qū)域的獎品被選中呢？這個我們根據(jù)記錄的隨機(jī)函數(shù)可以判斷，如果隨機(jī)角度是0-36°，因為一個扇形是36°，就是第一個扇形變色，我們用選中的交互將他選中即可，因為前面我們設(shè)置了選中樣式，選中了填充顏色就會變化，那一次類推，如果隨機(jī)是36-72之間，就選中第二個，72-108之間就是第三個……

這是轉(zhuǎn)一次的交互，我們接下來要考慮轉(zhuǎn)多次的交互。

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

第一次完成旋轉(zhuǎn)后，第二次要達(dá)到的角度就不是1080+隨機(jī)角度了，因為第一次完成之后，所在的角度就是1080+隨機(jī)角度，所以第二次我們應(yīng)該旋轉(zhuǎn)到達(dá)的角度就是兩個1080+隨機(jī)角度，其實就是每次轉(zhuǎn)完介紹都要加多一個固定轉(zhuǎn)的角度1080。我們用設(shè)置文本的交互，將記錄的圈數(shù)在加一次默認(rèn)的圈數(shù)。

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

這樣我們就完成了轉(zhuǎn)盤抽獎原型模板的制作了。以后使用基本上就是復(fù)制粘貼，然后替換一下獎品圖片和文字，就可以直接使用了，是不是很方便呢？

那以上就是本期教程的全部內(nèi)容，感興趣的同學(xué)們可以動手試試哦，感謝您的閱讀，我們下期見。