hello，我又來啦，今天和大家分享用axure怎么做自適應，也就是說，我們做app端的作品時，怎么在不同的手機尺寸，顯示最佳的樣式。那么這期的話，我會以一個游戲的案例來展開，所以比較好玩。首先我會教大家如何制作游戲原型，然后主要講原型制作完成后怎樣做手機版自適應的效果。如果喜歡的朋友們，點下關注和收藏，謝謝大家！

效果演示

1. 演示地址

https://filq8e.axshare.com

制作教程

1. 材料準備

這里需要幾張圖片，分別是桶、漢堡、雞翅、可樂、薯條，這些圖片都可以在網上找到，當然了你也可以用別的圖片代替。

接著您需要復制黏貼多個漢堡、雞翅、可樂、薯條；如下圖所示打亂擺放即可。

將所有的漢堡、雞翅、可樂、薯條組合起來，再和桶一起轉為動態面板，記住這里要取消自動調整為內容尺寸，然后將動態面板填充一個背景色，案例中是深紅色，再調整動態面板大小，調整桶的位置，放在面板底端居中位置。

最后，將漢堡、雞翅、可樂、薯條移到上方看不見的地方，簡單來說就是-this.height

2. 開始頁面制作

開始頁其實就是一個游戲玩法的介紹，如下圖所示，簡單做法是可以用矩形、文字和圖標組成。左右滑動的圖片建議大家可以在icon找。

最后還有一個知道啦的提交按鈕，只有這個按鈕是有交互的。

鼠標單擊時，先隱藏掉開始頁的元件組合，然后向下移動漢堡、雞翅、可樂、薯條組合，移動到直至看不到最上的一塊，用數學公式就是target.height+動態面板.height。

移動動畫選擇漸變，時間根據實際設置，案例是20000ms。

移動結束時，即等待20000ms，顯示的分頁。

3. 判斷得分

我們首先要拉一個文本記錄分數，默認為空值即可。

然后我們要在桶口（頂端）放一個熱區，這是用來判斷實物有沒有進洞口。

當漢堡、雞翅、可樂、薯條移動時，我們需要做一個判斷，如果碰到洞口，就隱藏該元件，并且得分（計分文本原來的值+得分），如果沒有碰到就不得分（計分文本框原來的值）。漢堡、雞翅、可樂、薯條的分數我分別設置為10、8、6、4分，大家可以根據需要自己設置。

4. 得分頁制作

這頁和開始頁很像，只是文字，不一樣，所以我們只需要改一下文字，和設置計分=上面的計分文本。

里面只有在玩一次有交互，這里交互有兩種做法，一種是將所有的漢堡、雞翅、可樂、薯條顯示，然后移動回最開始的位置，桶也是移動回最開始的位置，然后出發之前知道了的事件，重新開始游戲。

但是我覺得這樣做太復雜了，所以我用第二種方法，刷新頁面，哈哈哈哈哈哈哈哈。

5.自適應的設置

如果想在每一臺手機設備，都能看到自適應的效果怎么做呢？

首先的話我們要對外部的動態面板移動到(0,0)的位置。

載入時，設置動態面板的尺寸，寬度=屏幕的寬度，高度=屏幕的高度，錨點在左上角。

然后到桶，桶也是一樣，我們要設置他的尺寸，那桶的尺寸怎么設計能，其實他的寬度=窗口的width/原始動態面板的歡度*桶的寬度，高度=窗口的width/原始動態面板的歡度*高度。錨點同樣在左上角。然后的話移動桶到中部位置即可，中部位置x=(窗口寬度-桶的寬度)/2。

最后到炸雞組合，首先也是設置尺寸，和上面桶的方式是一致的，然后移動，移動的話這里的y值要移動到-this.height。

這樣就完成了，完成之后，需要上傳到網上，用axshare、axhub、或者大牛都可以，然后生成網址、或者二維碼，用手機連接就可以看到手機端的效果了。

那么這期分享就想到這里了，如果大家喜歡的關注一下和收藏文章，謝謝大家。

本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash，基于CC0協議