文章分享了螞蟻莊園星星球自動陪練的原型設(shè)計過程，希望對你有所受用。

10月26號在起點學院公開課上演示了三個有趣的小案例，今天我們來看看其中的“星星球自動陪練”小游戲的詳細解析。

點擊這里在線演示。

案例背景

為了能在公開課上說些有趣，并且能體現(xiàn)出Axure8特點的例子，聽取了運營老師和同學的建議，也是想了好幾個案例，在小游戲上最終選擇了大家熟知的支付寶工具里的案例，其中的螞蟻莊園星星球是支付寶推出不久的趣味游戲，相信肯定有很多人已經(jīng)體驗過。

我們不希望單純的只是去實現(xiàn)一個這樣的小游戲，而是希望從實現(xiàn)的過程中，了解Axure8的常用功能（樣式設(shè)置、事件處理、動畫設(shè)置、函數(shù)使用等），對我們學習這樣的工具有所幫助。

案例策劃

星星球游戲雖然簡單，但是它的場景非常的豐富，有開場動畫、接球動畫、有數(shù)據(jù)統(tǒng)計、有精美的游戲環(huán)境等等，如果完全去實現(xiàn)這樣非常接近的場景還是要花不少時間的。因此我們只是簡單地實現(xiàn)它的主要功能，并且進一步做了改善——讓它自動去陪練，并且使用了Axure8中的如下幾個功能：

1. 動態(tài)面板的使用：對小雞的移動操作是一個相對的整體，因此將組成小雞和所有元件轉(zhuǎn)換成一個動態(tài)面板，并給它起個名字
2. 樣式的設(shè)置：小雞的卡通形象是由基本元件組成，通過設(shè)置不同的形狀、大小、背景色來完成，星星球同樣是通過設(shè)置填充色和陰影效果來完成。
3. 數(shù)學函數(shù)的使用：自動陪練的效果需要實現(xiàn)發(fā)球到隨機位置的效果，就會使用到數(shù)學函數(shù)里的隨機函數(shù)，這個函數(shù)也是小游戲來原型常用的，體現(xiàn)了游戲的不確定性。
4. 動畫的應(yīng)用：游戲總是伴隨著一些動畫效果才更有趣，動畫效果肯定需要用上。
5. 循環(huán)控制：如果讓發(fā)球、接球并回球整體一個回合能重復應(yīng)用？

小游戲流程

在整個小游戲策劃完成之后，真正實現(xiàn)起來就比較快了，下面我們看一下游戲里的關(guān)鍵點。

案例解析

游戲環(huán)境設(shè)置

游戲環(huán)境是在一個操場上，操場的周圍有幾課樹，一只小雞、一個星星球玩具。所有這些我們只需要使用地Axure的基本元件就可以了，設(shè)置形狀和背景色。

1、卡通小雞

看看卡通小雞的組成：

它其實就是一些橢圓形（身體、眼睛、翅膀、腮紅、陰影）、矩形（腳）、三角形（嘴）、半圓形（雞冠），通過設(shè)置不同的填充色。

為了小雞自己也能扇動翅膀，我們將兩個翅膀的橢圓形轉(zhuǎn)換成了動態(tài)面板，目的是在動態(tài)面板載入事件里可以設(shè)置旋轉(zhuǎn)動畫。

將組成小雞的所有元件選中后，轉(zhuǎn)成動態(tài)面板。為了在小雞在轉(zhuǎn)動翅膀時也能看全，將動態(tài)面板調(diào)整寬一點，左右各留一點空隙。

2、星星球

星星球就是一個圓形，然后設(shè)置一下它的漸變填充色和一定的填充角度，只是Axure目前的填充色只支持線性填充，沒辦法做成那種像PS里的圓形填充效果。（當然，我們可以直接使用一個球形圖片來代替）

設(shè)置一下小球的陰影效果：

只在y軸方向上有偏移，也就是模擬光線從上方照下來。

3、星星球背后的白色小球

設(shè)置為白色背景，透明度為68。

4.周邊環(huán)境

最后，我們將小雞、操場、星星球作為一個大的整體，選中后右鍵轉(zhuǎn)成動態(tài)面板，接著在旁邊用綠色漸變填充方式的橢圓，加上矩形做一棵綠色的小樹。選中小樹Ctrl+D復制兩棵小樹，調(diào)整一下大小。

到這里環(huán)境準備好了，完整的場景如下：

事件處理

下面來講解事件處理過程，三個地方添加了事件處理：

• 外層動態(tài)面板載入時事件
• 星星球被單擊事件
• 小雞翅膀的動態(tài)面板載入時事件

1.外層動態(tài)面板載入時事件：白色小球的自動縮放處理

在游戲開始時，星星球后面的白色小球放大后消失，然后重復顯示。

事件在外層動態(tài)面板的載入事件上：

• 設(shè)置白色小球大小為200*200，配合線性動畫，時長為2秒，從中心開始放大，實現(xiàn)放大效果
• 設(shè)置白色小球的透明度到0，配合線性動畫效果，時長2秒，實現(xiàn)消失效果
• 等待2秒鐘，注意時間和上面兩個動畫效果時長一致
• 設(shè)置白色小球大小為原大小94*94，不需要設(shè)置動畫效果，目的是恢復小球大小。
• 設(shè)置透明度為100，也就是恢復透明度為原狀。
• 觸發(fā)動態(tài)面板的載入時事件，實現(xiàn)循環(huán)處理

2.星星球被單擊事件：處理發(fā)球后自動陪練

這是游戲事件的核心處理過程。

事件分為發(fā)球和小雞接球后的回球過程。

發(fā)球過程：

• 先把白色自動放大的小球隱藏起來
• 設(shè)置小球為最小20*20
• 設(shè)置隨機的x位置，這里應(yīng)用的是數(shù)學隨機函數(shù)，生成一個隨機的位置，隨機的大小為0~(min_ball/2)+Math.random()*390，其實就是一個簡單的數(shù)學算式
• 將小球移動到目標位置
• 將小雞也移動到目標位置，這里要注意一點，因為球的大小、小球的大小不一致，所以小雞移動的位置要稍微算一下[[random_x-chicken_r+min_ball_r]]，就是隨機的位置減去小雞大小的半徑，再加上球在最小時的半徑
• 為了模擬的更逼真，小球在移動的過程中旋轉(zhuǎn)一定角度350度，配合動畫效果

等待時間：

等待時間為2000毫秒，和發(fā)球過程中小球移動時動畫所需要的時間一致。

小球發(fā)過去到虛線的位置的動畫時長，和小雞移動過去到球的位置動畫時長保持一致，這樣剛好能接到球。

回球過程：

回球的過程和發(fā)球過程基本相反，將小球移動到原來位置，并還原大小，然后將小雞也移動到原來的位置。

• 移動小球到原來位置，配合線性動畫
• 設(shè)置小球尺寸為原大小，配合線性動畫
• 移動小雞到原來位置，配合線性動畫
• 旋轉(zhuǎn)小球

循環(huán)處理：

• 重新觸發(fā)小球的單擊事件，模擬循環(huán)處理

3.小雞翅膀的動態(tài)面板載入時事件：模擬小雞扇動翅膀

• 選擇小雞翅膀動態(tài)面板
• 添加載入時事件
• 旋轉(zhuǎn)小翅膀，以順時針方向，旋轉(zhuǎn)60度，圍繞著左上角，動畫時長為1200毫秒
• 等待100毫秒
• 逆時針旋轉(zhuǎn)相同的角度，配合相同時長的動畫
• 重新觸發(fā)動態(tài)面板的載入時事件完成循環(huán)扇動

小結(jié)

整個小游戲的過程已經(jīng)講解完畢，希望大家能從趣味中也能學習到Axure的一些技巧。

案例下載：

鏈接:?https://pan.baidu.com/s/1skGUXYl?密碼:?fk5q

本文由 @Axure原型設(shè)計工場 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議