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、可能大牛都可以，然后生成网址、可能二维码，用手机毗连就可以看得手机端的结果了。

那么这期分享就想到这里了，假如各人喜欢的存眷一下和保藏文章，感谢各人。