如何利用Axure來(lái)制作有趣的小紅書(shū)促銷(xiāo)小游戲？一起來(lái)文中看看~

溫馨提示注：本教程適合有Axure基礎(chǔ)的人觀看

首先我們先看看制作的效果：

操作說(shuō)明：長(zhǎng)按圓臉，臉會(huì)隨著鼠標(biāo)按的時(shí)間壓縮，壓縮越久，松開(kāi)鼠標(biāo)時(shí)彈得越遠(yuǎn)，同時(shí)能把箱子頂?shù)迷竭h(yuǎn)。箱子跟頂部虛線框重合度越高，獲得分?jǐn)?shù)越高。

當(dāng)在小紅書(shū)看到這個(gè)游戲時(shí)，我覺(jué)得可以用Axure實(shí)現(xiàn)，所以就花了時(shí)間把它做下來(lái)了。

話(huà)不多說(shuō)，教學(xué)開(kāi)始~

一、圓臉

步驟1：畫(huà)臉

動(dòng)效分析：當(dāng)長(zhǎng)按時(shí)

• 臉會(huì)被壓縮
• 眼睛變樣
• 臉越來(lái)越紅

根據(jù)這三個(gè)特性，我們把圓臉?lè)殖扇糠之?huà)出來(lái)。

元素說(shuō)明：

1. 臉直接畫(huà)一體的，方便一起變形，命名：臉背景
2. 腮紅是用photoshop畫(huà)筆點(diǎn)了一下，白色為透明的，命名：臉紅
3. 眼睛用動(dòng)態(tài)面板，分別創(chuàng)建兩個(gè)狀態(tài)，命名：眼睛

步驟2：做動(dòng)效

（1）首先把三個(gè)元素組合到一起，命名：臉，因?yàn)橐刂迫齻€(gè)元素一起變形。

（2）選中臉組合，創(chuàng)建動(dòng)態(tài)面板，命名：角色。繪制背景375*667，填充粉紅色。添加一文本，輸入0，命名：長(zhǎng)按時(shí)間（這個(gè)數(shù)據(jù)很有用）。

（3）利用動(dòng)態(tài)面板記錄長(zhǎng)按時(shí)間，創(chuàng)建一個(gè)動(dòng)態(tài)面板，命名：記錄時(shí)間，創(chuàng)建兩個(gè)狀態(tài)。設(shè)置用例當(dāng)長(zhǎng)按“角色”時(shí)，設(shè)置“記錄時(shí)間”動(dòng)態(tài)面板開(kāi)始循環(huán)，循環(huán)間隔100ms。同時(shí)，由于長(zhǎng)按“角色”時(shí)，想讓眼睛變形，所以設(shè)置“眼睛”為狀態(tài)2，如下：

“記錄時(shí)間”動(dòng)態(tài)面板設(shè)置

控制“長(zhǎng)按時(shí)間”文本值范圍在0-10之內(nèi)，所以設(shè)置在“長(zhǎng)按時(shí)間”＜10情況下執(zhí)行以下命令。

第一條用例說(shuō)明：“記錄時(shí)間”狀態(tài)每改變一次，“長(zhǎng)按時(shí)間”文本值+1。

第二條用例說(shuō)明：設(shè)置“臉”高度尺寸隨長(zhǎng)按時(shí)間增長(zhǎng)變小。LVAR1變量為“長(zhǎng)按時(shí)間”元件文字。

第三條用例說(shuō)明：首先設(shè)置“臉紅”元件透明度為0，LVAR1變量為“長(zhǎng)按時(shí)間”元件文字

步驟3：設(shè)置移動(dòng)

（1）設(shè)置元件“角色”，鼠標(biāo)松開(kāi)時(shí)用例：

首先設(shè)置“記錄時(shí)間停止循環(huán)”，設(shè)置變形后的“臉”變回之前的尺寸。

等待執(zhí)行上述兩操作之后，移動(dòng)“角色”，距離是“長(zhǎng)按時(shí)間”×20，動(dòng)畫(huà)線性500ms。

等待500ms移動(dòng)結(jié)束后，移動(dòng)“角色”回到之前的距離。

設(shè)置“眼睛”為之前的眼睛；

設(shè)置“臉紅”透明度0；

設(shè)置“長(zhǎng)按時(shí)間”為0。

角色根據(jù)長(zhǎng)按時(shí)間彈起效果

結(jié)束語(yǔ)

其他效果大家可以自行研究，有不懂可以提問(wèn)，大家可以在公眾號(hào)獲取原型和素材，或者直接百度云下載：

鏈接：https://pan.baidu.com/s/1EFCeF3tuLk02AR2Wvhd_lA

提取碼：8n8c

作者：suck-mylip

本文由 @suck-mylip 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議