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

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

點擊這里在線演示。

案例背景

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

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

案例策劃

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

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

小游戲流程

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

案例解析

游戲環境設置

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

1、卡通小雞

看看卡通小雞的組成：

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

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

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

2、星星球

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

設置一下小球的陰影效果：

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

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

設置為白色背景，透明度為68。

4.周邊環境

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

到這里環境準備好了，完整的場景如下：

事件處理

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

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

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

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

事件在外層動態面板的載入事件上：

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

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

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

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

發球過程：

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

等待時間：

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

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

回球過程：

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

• 移動小球到原來位置，配合線性動畫
• 設置小球尺寸為原大小，配合線性動畫
• 移動小雞到原來位置，配合線性動畫
• 旋轉小球

循環處理：

• 重新觸發小球的單擊事件，模擬循環處理

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

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

小結

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

案例下載：

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

本文由 @Axure原型設計工場 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基于CC0協議