前兩天分享了一個(gè)簡易版的“幸運(yùn)大轉(zhuǎn)盤”，雖然達(dá)成了“轉(zhuǎn)動”的效果演示，但客觀性實(shí)在有待提高。因此，今天重新完善這個(gè)項(xiàng)目，做到有始有終。布局元素的設(shè)置與調(diào)整1. “幸運(yùn)大轉(zhuǎn)盤”相對來說比較簡單，主要涉及

前兩天分享了一個(gè)簡易版的“幸運(yùn)大轉(zhuǎn)盤”，雖然達(dá)成了“轉(zhuǎn)動”的效果演示，但客觀性實(shí)在有待提高。因此，今天重新完善這個(gè)項(xiàng)目，做到有始有終。

布局元素的設(shè)置與調(diào)整

1. “幸運(yùn)大轉(zhuǎn)盤”相對來說比較簡單，主要涉及布局處理。首先新建“圓”、“箭頭”、“按鍵”、“文本標(biāo)簽”（共8個(gè)）、以及“水平線”或“豎線”（4條）。

2. 設(shè)置“圓”的尺寸為300*300，并任意填充顏色，設(shè)置所需的邊線顏色；將“水平線”尺寸設(shè)為300*1，顏色隨意，并復(fù)制3份，分別旋轉(zhuǎn)至45度、90度和135度，按照下圖方式進(jìn)行布局。

個(gè)性化設(shè)計(jì)增加趣味性

3. 此時(shí)，“圓”被等分為8份，可以根據(jù)需求，劃分不同區(qū)塊以增加“獎項(xiàng)”或“中獎概率”。這里僅按“圓”的8等份演示做說明。

4. 復(fù)制8份“文本標(biāo)簽”，分別設(shè)置不同的“獎項(xiàng)”和旋轉(zhuǎn)角度；演示版本的旋轉(zhuǎn)角度為：337.5度、292.5度、247.5度、202.5度、157.5度、112.5度、67.5度及22.5度。

5. 將“文本標(biāo)簽”、“圓”、“水平線”組合，并命名為“轉(zhuǎn)盤”，如下圖所示布局。

交互設(shè)計(jì)使轉(zhuǎn)盤更具活力

6. 設(shè)置“箭頭”尺寸為200*10，填充色為FF0000，并旋轉(zhuǎn)至330度（可自定義），置于“組合：轉(zhuǎn)盤”上方的中間位置；將“按鍵”內(nèi)容設(shè)為“轉(zhuǎn)一轉(zhuǎn)”，如下圖所示布局。

7. 現(xiàn)在讓轉(zhuǎn)盤的指針開始轉(zhuǎn)動吧！

設(shè)置交互動作增強(qiáng)用戶體驗(yàn)

8. 設(shè)置“按鍵”鼠標(biāo)單擊時(shí)的交互動作：

- 動作1：設(shè)置指針旋轉(zhuǎn)角度為[[Math.random()*10000]]，順時(shí)針旋轉(zhuǎn)，錨點(diǎn)為中心，動畫效果為緩進(jìn)緩出，時(shí)間為5000毫秒（Math.random()為隨機(jī)數(shù)）。

- 動作2：設(shè)置轉(zhuǎn)盤旋轉(zhuǎn)角度為[[Math.random()*5000]]，逆時(shí)針旋轉(zhuǎn)，錨點(diǎn)為中心，動畫效果為緩進(jìn)緩出，時(shí)間為5000毫秒（Math.random()為隨機(jī)數(shù)）。

完成精美的幸運(yùn)大轉(zhuǎn)盤設(shè)計(jì)

10. 至此，通過簡單而精致的設(shè)置，美麗的“幸運(yùn)大轉(zhuǎn)盤”完成啦！快來轉(zhuǎn)一轉(zhuǎn)，看看你的幸運(yùn)之神是否眷顧你。

11. 如果覺得設(shè)計(jì)不錯，請給我們投票并點(diǎn)贊哦！