生活中在購物的時候經常會遇到一些可以抽獎的活動，很多時候都採用轉盤抽獎的形式，抽中獎自然很開心啦，但是這個轉盤原型是怎樣做出來的呢，馬上來看下吧！
先來個完整圖，所有的佈局結構，如下圖：
步驟一：搭建組件
“轉盤”：一個300×300白底黑框的圓形（大小適中就可以），一條垂直線，一條45度垂直線，一條水平線，一條45度水平線，四條線組成8等份，放置在圓形的正中；每一等份放置一個文本標籤，用於抽獎憑證，以上所有組件組合並命名為“轉盤”。
“抽獎按鈕”與“抽獎指針”：一個100×100的灰底黑框圓形，中間文字為“抽獎”，命名為“抽獎按鈕”，並放置於轉盤的正上方；一個10×30的灰底黑框的三角形，命名為“抽獎指針”並放置於“抽獎按鈕”正上方。
步驟二：為“抽獎按鈕”添加鼠標點擊時用例
只要一個用例就可以完成轉盤抽獎效果啦
該用例動作：相對旋轉轉盤，角度為[[100000+Math.random()*360]]，順時針方向，錨點為中心，動畫為線性，時間為2000毫秒（時間主要控制轉的速度）。
這樣就全部完成了，這個只用設置一個用例，所以相對會簡單一些。
題圖來自Unsplash，基於CC0協議
分享到:
閱讀更多 人人都是產品經理 的文章
