建议收藏：Axure手机自适应教程

hello ，我又来啦，今天和大家分享用axure怎么做自适应，也就是说，我们做app端的作品时，怎么在不同的手机尺寸，显示最佳的样式。那么这期的话，我会以一个游戏的案例来展开，所以比较好玩。首先我会教大家如何制作游戏原型，然后主要讲原型制作完成后怎样做手机版自适应的效果。如果喜欢的朋友们，点下关注和收藏，谢谢大家！

本文插图
效果演示
1. 演示地址
https://filq8e.axshare.com

本文插图
制作教程
1. 材料准备
这里需要几张图片，分别是桶、汉堡、鸡翅、可乐、薯条，这些图片都可以在网上找到，当然了你也可以用别的图片代替。
接着您需要复制黏贴多个汉堡、鸡翅、可乐、薯条；如下图所示打乱摆放即可。

本文插图
将所有的汉堡、鸡翅、可乐、薯条组合起来，再和桶一起转为动态面板，记住这里要取消自动调整为内容尺寸，然后将动态面板填充一个背景色，案例中是深红色，再调整动态面板大小，调整桶的位置，放在面板底端居中位置。
最后，将汉堡、鸡翅、可乐、薯条移到上方看不见的地方，简单来说就是-this.height
2. 开始页面制作
开始页其实就是一个游戏玩法的介绍，如下图所示，简单做法是可以用矩形、文字和图标组成。左右滑动的图片建议大家可以在icon找。
最后还有一个知道啦的提交按钮，只有这个按钮是有交互的。
鼠标单击时，先隐藏掉开始页的元件组合，然后向下移动汉堡、鸡翅、可乐、薯条组合，移动到直至看不到最上的一块，用数学公式就是target.height+动态面板.height 。
移动动画选择渐变，时间根据实际设置，案例是20000ms 。
移动结束时，即等待20000ms ，显示的分页。

本文插图
3. 判断得分
【建议收藏：Axure手机自适应教程】我们首先要拉一个文本记录分数，默认为空值即可。
然后我们要在桶口（顶端）放一个热区，这是用来判断实物有没有进洞口。

本文插图
当汉堡、鸡翅、可乐、薯条移动时，我们需要做一个判断，如果碰到洞口，就隐藏该元件，并且得分（计分文本原来的值+得分），如果没有碰到就不得分（计分文本框原来的值）。汉堡、鸡翅、可乐、薯条的分数我分别设置为10、8、6、4分，大家可以根据需要自己设置。