hello，自適e做自適我又來(lái)啦，應分今天和大家分享用axure怎么做自適應，享用也就是基礎說(shuō)，我們做app端的自適e做自適作品時(shí)，怎么在不同的應分手機尺寸，顯示最佳的享用樣式。那么這期的基礎話(huà)，我會(huì )以一個(gè)游戲的自適e做自適案例來(lái)展開(kāi)，所以比較好玩。應分首先我會(huì )教大家如何制作游戲原型，(′?｀*)享用然后(hou)主要講原型制作完成后怎樣做手機版自適應的基礎效果。如果喜歡的自適e做自適朋友們，點(diǎn)下關(guān)注和收藏，應分謝謝大家！??享用

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

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

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

最后，將漢堡、雞翅、可樂(lè )ヽ(′?｀)ノ、薯條移到上方看不見(jiàn)的地方，簡(jiǎn)單來(lái)說(shuō)就是-(╬?益?)this.height

開(kāi)始頁(yè)其實(shí)就是一個(gè)游戲玩法的介紹，如下圖所示，簡(jiǎn)單做法是可以用矩形、文字和圖標組成。左右滑動(dòng)的圖片建議大家可以在icon找。

最后還(′▽?zhuān)?)有一個(gè)知道啦的提交按鈕，只有這個(gè)按鈕是有交互的。

鼠標單擊時(shí)，先隱藏掉開(kāi)始頁(yè)的元件組合，然后向下移動(dòng)漢堡、雞翅、可樂(lè )、薯條組合，移動(dòng)到直至看不到最上的一塊，用數(╯‵□′)╯學(xué)公式就是target.height+動(dòng)態(tài)ヽ(′ー｀)ノ面板.h??eight。

移動(dòng)動(dòng)畫(huà)選擇漸變，時(shí)間根據(ju)實(shí)際設置，案例是20000ms。

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

然后我們要在桶口（頂端）放一個(gè)熱區，這是用來(lái)ヽ(′▽?zhuān)?ノ判斷實(shí)物有沒(méi)有進(jìn)洞口。

當漢堡、雞翅、可樂(lè )、薯條移動(dòng)時(shí)，我們需要做一個(gè)判斷，如果碰到洞口，就隱藏該元件，并且得分（計分文本原來(lái)的(de)值+得分），如果沒(méi)有碰到就不得分（計分??文本框原來(lái)的值）。漢堡、雞翅、可樂(lè )、薯條的分數我分┐(′д｀)┌別設置為10、8、6、4分，大家可以根據需要自己設置。

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

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

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

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

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

載入時(shí)，設置動(dòng)態(tài)面板??的尺寸ヾ(?■_■)ノ，寬度=屏幕的寬度，高度=屏幕的高度，錨點(diǎn)在左上角。

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

最后到炸雞組合，首先也是設置尺寸，和ヽ(′▽?zhuān)?ノ上面桶的方式是一致的，然后移動(dòng)，移動(dòng)的話(huà)這里的y值要移動(dòng)到-t(′_ゝ`)his.height。

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

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