起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門(mén)專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)Axure原型設(shè)計(jì)：活動(dòng)抽獎(jiǎng)轉(zhuǎn)盤(pán)
生活中在購(gòu)物的時(shí)候經(jīng)常會(huì)遇到一些可以抽獎(jiǎng)的活動(dòng)，很多時(shí)候都采用轉(zhuǎn)盤(pán)抽獎(jiǎng)的形式，抽中獎(jiǎng)自然很開(kāi)心啦，但是這個(gè)轉(zhuǎn)盤(pán)原型是怎樣做出來(lái)的呢，馬上來(lái)看下吧！
先來(lái)個(gè)完整圖，所有的布局結(jié)構(gòu)，如下圖：
步驟一：搭建組件
“轉(zhuǎn)盤(pán)”：一個(gè)300×300白底黑框的圓形（大小適中就可以），一條垂直線，一條45度垂直線，一條水平線，一條45度水平線，四條線組成8等份，放置在圓形的正中；每一等份放置一個(gè)文本標(biāo)簽，用于抽獎(jiǎng)憑證，以上所有組件組合并命名為“轉(zhuǎn)盤(pán)”。
“抽獎(jiǎng)按鈕”與“抽獎(jiǎng)指針”：一個(gè)100×100的灰底黑框圓形，中間文字為“抽獎(jiǎng)”，命名為“抽獎(jiǎng)按鈕”，并放置于轉(zhuǎn)盤(pán)的正上方；一個(gè)10×30的灰底黑框的三角形，命名為“抽獎(jiǎng)指針”并放置于“抽獎(jiǎng)按鈕”正上方。
步驟二：為“抽獎(jiǎng)按鈕”添加鼠標(biāo)點(diǎn)擊時(shí)用例
只要一個(gè)用例就可以完成轉(zhuǎn)盤(pán)抽獎(jiǎng)效果啦
該用例動(dòng)作：相對(duì)旋轉(zhuǎn)轉(zhuǎn)盤(pán)，角度為[[100000+Math.random()*360]]，順時(shí)針?lè)较?，錨點(diǎn)為中心，動(dòng)畫(huà)為線性，時(shí)間為2000毫秒（時(shí)間主要控制轉(zhuǎn)的速度）。
這樣就全部完成了，這個(gè)只用設(shè)置一個(gè)用例，所以相對(duì)會(huì)簡(jiǎn)單一些。
弄好趕緊看看預(yù)覽效果：https://83ompk.axshare.com/index.html
本文由 @?方子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
哈，看完還是不太會(huì)？你可能需要從Axure基礎(chǔ)開(kāi)始學(xué)
這里推薦你加Axure實(shí)戰(zhàn)班的助教小可愛(ài)@CC-起點(diǎn)學(xué)院（微信：qidiancc520），回復(fù)關(guān)鍵詞：大禮包
?? 領(lǐng)取適合產(chǎn)品新人的原型設(shè)計(jì)大禮包哦，cc還會(huì)不定期分享Axure免費(fèi)視頻課程呢！
旋轉(zhuǎn)有點(diǎn)抖呢，咋解決呢
如能讓轉(zhuǎn)盤(pán)慢慢的停下來(lái) 而不是突然停下來(lái)
http://www.aharts.cn/rp/614610.html
請(qǐng)大家移步原文
你這個(gè)預(yù)覽地址是你本地的預(yù)覽地址，別人是看不到的2333
當(dāng)時(shí)我就震驚了 ??
震驚
是嗎 ?? 我本來(lái)想放發(fā)布的那個(gè)網(wǎng)址的，發(fā)不出錯(cuò)了，就用了這個(gè)，我自己是可以看到的，但是不知道大家看不到，謝謝提醒