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

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

一、效果展示

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

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

二、制作教程

1. 材料準(zhǔn)備

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

1）1外圈的制作

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

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

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

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

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

3）指針的的制作

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

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

2. 交互制作

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

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

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

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

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

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

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

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

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

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

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