本文教大家如何用Axure實(shí)現(xiàn)鱷魚(yú)咬人玩具游戲，一起來(lái)看看~

早上看到一個(gè)鱷魚(yú)咬人的玩具，按下鱷魚(yú)的牙齒，會(huì)觸發(fā)機(jī)關(guān)咬下來(lái)，每次觸發(fā)的牙齒位置都不一樣，心里萌生出，這個(gè)效果能不能用Axure實(shí)現(xiàn)？

于是，我在一個(gè)早餐的時(shí)間把它做了出來(lái)了！

是不是很有趣，有沒(méi)有被老師帥到，教學(xué)開(kāi)始！

本教程可以學(xué)到的內(nèi)容：

1. 隨機(jī)數(shù)的應(yīng)用
2. 選項(xiàng)組的應(yīng)用
3. 提高作圖效率的方法：同種類型元素函數(shù)復(fù)用
4. 多層動(dòng)畫(huà)移動(dòng)效果
5. 文末有彩蛋

原理圖：

一、繪制

1.1 繪制元素

利用布爾運(yùn)算，繪制出以下四個(gè)元素、分別命名如圖所示名稱：

1.2 組合元素

選中上顎和牙齒創(chuàng)建為動(dòng)態(tài)面板，命名[上顎面板]，因?yàn)檫@兩個(gè)元素要作為整體移動(dòng)。

二、添加交互

2.1 牙齒交互

這里我們給牙齒添加兩種情形：

1. 牙齒被選中時(shí)，點(diǎn)擊牙齒，移動(dòng)[上顎]動(dòng)態(tài)面板向下，模擬咬的動(dòng)作；
2. 牙齒未選中時(shí)，點(diǎn)擊牙齒，移動(dòng)牙齒向上，模擬牙齒縮進(jìn)去效果。

這里我們可以發(fā)現(xiàn)，我設(shè)置移動(dòng)[牙齒1]到達(dá)X的坐標(biāo)是[[LVAR1.x]]，而不是輸入具體坐標(biāo)，主要是為了方便后邊復(fù)制多個(gè)牙齒，交互動(dòng)作可以復(fù)用。

我們這里復(fù)制5個(gè)牙齒，分別命名牙齒2、牙齒3、牙齒4、牙齒5。

2.2 添加隨機(jī)選中五個(gè)牙齒函數(shù)

這個(gè)也可以使用設(shè)置全局變量來(lái)做，但為了讓大家更容易理解，我使用文本框來(lái)制作這個(gè)功能。

①添加文本框，命名[隨機(jī)數(shù)]

②添加按鈕，命名[產(chǎn)生隨機(jī)數(shù)]

③設(shè)置[產(chǎn)生隨機(jī)數(shù)]按鈕交互，點(diǎn)擊時(shí)-設(shè)置[隨機(jī)數(shù)]文本框文本為：[[Math.ceil(5*Math.random())]]

這個(gè)函數(shù)我在上期教程有解釋過(guò)，就是取1-5隨機(jī)正整數(shù)（詳細(xì)解釋可查看上期文章）

④通過(guò)上個(gè)步驟，[隨機(jī)數(shù)]文本框每點(diǎn)[產(chǎn)生隨機(jī)數(shù)]按鈕一次可產(chǎn)生一個(gè)1-5隨機(jī)正整數(shù)

⑤根據(jù)文本框的隨機(jī)數(shù)，隨機(jī)選中五個(gè)牙齒其中一個(gè)牙齒

首先為五個(gè)牙齒設(shè)置一個(gè)選項(xiàng)組，選中五個(gè)牙齒，右擊，選擇(選項(xiàng)組)，命名“牙齒”，這個(gè)操作的目的是，五個(gè)牙齒只能選中其中一個(gè)。

接著，我們?cè)O(shè)置[隨機(jī)數(shù)]文本框交互，文本改變時(shí)，添加情形，如果[隨機(jī)數(shù)]文本框文字為1，則選中[牙齒1]。

依次類推，如果文字為2，則選中[牙齒2]……

這樣我們隨機(jī)選中五個(gè)牙齒其中一個(gè)交互就做好了，看看效果：

我們可以看到，當(dāng)隨機(jī)數(shù)為3的時(shí)候，我們選中牙齒3，就咬下來(lái)了。

三、優(yōu)化細(xì)節(jié)

（1）我們?cè)趯?shí)際做游戲時(shí)，得把隨機(jī)數(shù)和按鈕隱藏，一進(jìn)入游戲頁(yè)面，自動(dòng)觸發(fā)點(diǎn)擊[產(chǎn)生隨機(jī)數(shù)]按鈕產(chǎn)生一個(gè)隨機(jī)數(shù)。

（2）首先牙齒咬下來(lái)后，我們得有個(gè)按鈕，點(diǎn)擊讓元件歸位。

我們[上顎]面板底下，畫(huà)一個(gè)元件，點(diǎn)擊時(shí)，移動(dòng)[上顎]面板和牙齒歸位，同時(shí)觸發(fā)，點(diǎn)擊[產(chǎn)生隨機(jī)數(shù)按鈕]，產(chǎn)生新一個(gè)隨機(jī)數(shù)。

然后，添加雙眼睛，去掉文字、隱藏隨機(jī)數(shù)按鈕和文本框。

四、最終效果

本期教學(xué)就到這里，我做完之后發(fā)鏈接給朋友玩，反映強(qiáng)烈，有人提出可以加入真心話大冒險(xiǎn)，于是我后來(lái)增加了：

還挺有意思挺適合聚會(huì)時(shí)玩游戲，跟女朋友玩也是不錯(cuò)的喲！大家提前看看效果，下期教學(xué)我會(huì)出怎么增加真心畫(huà)大冒險(xiǎn)和分?jǐn)?shù)等級(jí)機(jī)制。

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

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