Axure教程:模仿有趣的鱷魚(yú)咬人玩具游戲
本文教大家如何用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)容:
- 隨機(jī)數(shù)的應(yīng)用
- 選項(xiàng)組的應(yīng)用
- 提高作圖效率的方法:同種類型元素函數(shù)復(fù)用
- 多層動(dòng)畫(huà)移動(dòng)效果
- 文末有彩蛋
原理圖:
一、繪制
1.1 繪制元素
利用布爾運(yùn)算,繪制出以下四個(gè)元素、分別命名如圖所示名稱:
1.2 組合元素
選中上顎和牙齒創(chuàng)建為動(dòng)態(tài)面板,命名[上顎面板],因?yàn)檫@兩個(gè)元素要作為整體移動(dòng)。
二、添加交互
2.1 牙齒交互
這里我們給牙齒添加兩種情形:
- 牙齒被選中時(shí),點(diǎn)擊牙齒,移動(dòng)[上顎]動(dòng)態(tài)面板向下,模擬咬的動(dòng)作;
- 牙齒未選中時(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é)議
產(chǎn)品小白沒(méi)看懂復(fù)雜的交互設(shè)計(jì),想從基礎(chǔ)開(kāi)始學(xué),卻無(wú)從下手?
可以找Axure實(shí)戰(zhàn)班的助教小可愛(ài)@CC-起點(diǎn)學(xué)院(微信:qidiancc520),回復(fù)關(guān)鍵詞:禮物
?? 領(lǐng)取原型設(shè)計(jì)大禮包,還有不定期的Axure免費(fèi)視頻課程分享,老師在線答疑,多學(xué)多看多思考,你也能成為Axure原型設(shè)計(jì)大牛哦~
問(wèn)下,你的那個(gè)原型的眼睛是放到哪里了,為什么我的眼睛沒(méi)有隨著 上顎移動(dòng)
把眼鏡放到上顎動(dòng)態(tài)面板里,就可以一起移動(dòng)了
試過(guò),但是沒(méi)啥變化,眼睛和上顎合成動(dòng)態(tài)面板也不行啊,大佬
不是呀,把眼鏡和上顎放到同一個(gè)動(dòng)態(tài)面板里面,然后你移動(dòng)要設(shè)置移動(dòng)整個(gè)動(dòng)態(tài)面板才行,這樣眼睛和上顎都在這個(gè)面板里,就可以一起移動(dòng)了
那我試試
本文游戲地址:https://asdifk.axshare.com (加載較慢)
按教程做下來(lái),點(diǎn)擊牙齒為假時(shí)不收起,只有為真時(shí)才收起,是哪里錯(cuò)了嗎?大神指教
為假時(shí),你有設(shè)置牙齒向上移動(dòng)的交互嗎?可以加我微信發(fā)給我源文件看看Upwhite
注:流程圖有誤,剛開(kāi)始是用動(dòng)態(tài)面板自動(dòng)產(chǎn)生隨機(jī)數(shù),后臺(tái)我改用點(diǎn)擊按鈕產(chǎn)生隨機(jī)數(shù),簡(jiǎn)單點(diǎn)