大轉(zhuǎn)盤活動(dòng)在各種抽獎(jiǎng)的活動(dòng)場(chǎng)景中出現(xiàn)，游戲活動(dòng)簡(jiǎn)單直觀。

在axure8中，我們欣喜地看到提供了一些非常實(shí)現(xiàn)的動(dòng)作，如旋轉(zhuǎn)、設(shè)置大小、設(shè)置透明度等。

今天我們?cè)敿?xì)介紹一下旋轉(zhuǎn)功能的應(yīng)用，直接上在線效果圖，先體驗(yàn)一下：

點(diǎn)擊這里：幸運(yùn)大轉(zhuǎn)盤

大轉(zhuǎn)盤活動(dòng)常見(jiàn)于手機(jī)端活動(dòng)，如APP客戶端或者觸屏版頁(yè)面，因玩法簡(jiǎn)單，很受一些商家的歡迎。特別是在節(jié)假日，春節(jié)、元旦、情人節(jié)等等這些重要的節(jié)日，各種轉(zhuǎn)盤活動(dòng)層出不窮，商家也是變著花樣來(lái)玩大轉(zhuǎn)盤。現(xiàn)在一些線下的商超都會(huì)經(jīng)常在門戶搞一些這樣的大轉(zhuǎn)盤活動(dòng)。

功能說(shuō)明：

1. 可以選擇是轉(zhuǎn)盤旋轉(zhuǎn)還是指針旋轉(zhuǎn)
2. 轉(zhuǎn)盤旋轉(zhuǎn)時(shí)，指針復(fù)位；指針旋轉(zhuǎn)時(shí)，轉(zhuǎn)盤復(fù)位
3. 旋轉(zhuǎn)效果：先慢后快，最后再慢下來(lái)

一、素材準(zhǔn)備

在網(wǎng)上找一張大轉(zhuǎn)盤的圖片（可以到花瓣網(wǎng)上找一找，類似圖片很多），然后使用PS將圖片分解成三個(gè)部分如下（這里就不說(shuō)PS如何處理了），注意后面兩個(gè)圖片要保存PNG格式，帶有透明部分背景的：

二、導(dǎo)入圖片到axure中

將三張圖片分別拖入設(shè)計(jì)區(qū)域，按順序排好，注意三個(gè)位置的，排列好的效果如下：

為了能表現(xiàn)兩種大轉(zhuǎn)盤的轉(zhuǎn)法，添加了兩個(gè)單選框，分別以轉(zhuǎn)盤轉(zhuǎn)動(dòng)，以及指針旋轉(zhuǎn)的方式。

三、添加事件處理

給中間的抽獎(jiǎng)按鈕添加事件處理，因?yàn)橛袃煞N旋轉(zhuǎn)方式，因此，需要在事件處理里添加判斷：

事件說(shuō)明：

1）設(shè)置了一個(gè)全局變量angle，代表要旋轉(zhuǎn)的角度，設(shè)置變量值為360度范圍內(nèi)的隨機(jī)值360*Math.random()，為了讓轉(zhuǎn)盤多轉(zhuǎn)一會(huì)，設(shè)置了默認(rèn)至少轉(zhuǎn)20圈，即20*360=7200.

2）接著計(jì)算當(dāng)前的獎(jiǎng)品，也是定義了一個(gè)變量award

3）下一步就是根據(jù)當(dāng)前選中的旋轉(zhuǎn)方式，設(shè)置轉(zhuǎn)盤按順時(shí)針?lè)较蜷_(kāi)始旋轉(zhuǎn)，并添加了動(dòng)畫(huà)效果

4）將指針位置旋轉(zhuǎn)復(fù)位

選擇指針旋轉(zhuǎn)的方式情況下，和上面的情況類似，只是旋轉(zhuǎn)的對(duì)象不同而已。

自從有了axure8的這些旋轉(zhuǎn)、設(shè)置大小、設(shè)置透明度后，一些原型的效果做起來(lái)真是相對(duì)簡(jiǎn)單多了。

但是還有些功能沒(méi)有在意料之中，就是在動(dòng)作中設(shè)置蒙板效果（看不見(jiàn)的區(qū)域把它擋?。?，設(shè)置文字的大小、顏色等樣式，期望新的版本中能進(jìn)一步支持這些功能。

本文由 @Axure原型設(shè)計(jì)工場(chǎng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。