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

效果演示

1. 演示地址

https://filq8e.axshare.com

制作教程

1. 材料準備

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

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

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

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

2. 開始頁面制作

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

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

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

移動動畫選擇漸變，時間根據(jù)實際設(shè)置，案例是20000ms。

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

3. 判斷得分

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

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

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

4. 得分頁制作

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

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

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

5.自適應(yīng)的設(shè)置

如果想在每一臺手機設(shè)備，都能看到自適應(yīng)的效果怎么做呢？

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

載入時，設(shè)置動態(tài)面板的尺寸，寬度=屏幕的寬度，高度=屏幕的高度，錨點在左上角。

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

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

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

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

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

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的antd option宽度自适应_建议收藏：Axure手机自适应教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。