最近在畫一個(gè)活動(dòng)原型的時(shí)候，嘗試做了一個(gè)砸彩蛋的原型交互，這里和大家分享一下關(guān)于這個(gè)過程。

砸彩蛋大家基本上都有玩過，我們最重要實(shí)現(xiàn)的也就是“鼠標(biāo)移入時(shí)，會(huì)出現(xiàn)一個(gè)小錘子，砸開彩蛋后顯示結(jié)果?！?/p>

第一步：從元件庫拖入動(dòng)態(tài)面板，將該動(dòng)態(tài)面板命名為彩蛋，創(chuàng)建彩蛋的初始狀態(tài)

這是動(dòng)態(tài)面板的初始狀態(tài)，將該面板狀態(tài)命名為“彩蛋未砸”

第二步：根據(jù)需要分別設(shè)置彩蛋砸開的結(jié)果狀態(tài)

這里我一共設(shè)置了4種狀態(tài)，依次為彩蛋砸開未中、彩蛋砸開已中、沒有中獎(jiǎng)提示、中獎(jiǎng)提示。

第三步：再次拖入一個(gè)動(dòng)態(tài)面板，畫一個(gè)錘子。

從元件庫新拖入一個(gè)動(dòng)態(tài)面板，命名為錘子。恩，這個(gè)錘子不是老羅的錘子?。}外話：當(dāng)然也可以直接導(dǎo)入一個(gè)錘子圖片- -。我只是想著自己用矩形畫個(gè)錘子看看）。然后，將錘子的動(dòng)態(tài)面板設(shè)為隱藏

第四步：設(shè)置鼠標(biāo)移入彩蛋，顯示錘子隨鼠標(biāo)移動(dòng)；鼠標(biāo)移出，隱藏錘子的用例事件

設(shè)置彩蛋動(dòng)態(tài)面板的移入移出事件：當(dāng)鼠標(biāo)移入彩蛋動(dòng)態(tài)面板時(shí)，錘子會(huì)跟隨鼠標(biāo)移動(dòng)，移出彩蛋動(dòng)態(tài)面板時(shí)，錘子消失。

這里需要注意的是，錘子隨鼠標(biāo)移動(dòng)的設(shè)置，需要使用鼠標(biāo)指針的變量。移動(dòng)到絕對(duì)位置的X軸、Y軸變量為鼠標(biāo)指針的Cursor.x、Cursor.y，為了讓錘子顯示在鼠標(biāo)稍靠后的地方，因此在變量的基礎(chǔ)坐標(biāo)上減去50。（視實(shí)際情況減去對(duì)應(yīng)數(shù)值）

第五步：設(shè)置錘子的鼠標(biāo)單擊事件，也就是彩蛋的交互。

這里我設(shè)置的是紅蛋沒獎(jiǎng)、橙蛋有獎(jiǎng)，先說沒砸中的交互。

5.1 設(shè)置錘子砸紅蛋的單擊條件

錘子接觸到彩蛋時(shí)，并且此時(shí)彩蛋面板狀態(tài)為彩蛋未砸

5.2 設(shè)置錘子符合條件時(shí)的用例事件

當(dāng)錘子接觸到紅蛋，單擊鼠標(biāo)后，

1. 設(shè)置面板狀態(tài)為彩蛋砸開未中
2. 隱藏錘子
3. 等待1000毫秒
4. 設(shè)置面板狀態(tài)為沒有中獎(jiǎng)提示

5.3 同理設(shè)置錘子砸橙蛋的條件和用例事件

整個(gè)彩蛋的交互實(shí)現(xiàn)基本就是這樣。有需要的可以下載彩蛋原型。

下載鏈接: http://pan.baidu.com/s/1c02Vswo 密碼: rp84

本文由 @可飛（微信公眾號(hào)：pm-kefei） 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。