建议收藏: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分 , 大家可以根据需要自己设置 。
- 投资理财规划|理财就是理人生!投资大神的6条理财建议!
- 蔚来|两年前建议买入现在突然做空 香橼对蔚来汽车上演“大变脸”
- 北青网综合|冠心病患者如何过冬?这5个建议要谨记
- 比特币|比特币和以太坊多头高歌猛进,日内操作建议回踩做多
- 收益率|摩根大通下调传统四六资产配置收益预测,建议投资者转向投资另类资产
- 智慧农业|13天股价翻三倍,智慧农业带火“摘帽概念”,这些潜力股请收藏
- 北京日报客户端|延迟退休真的要来了!专家建议女性退休年龄延至55岁
- 潜力股|中国股市11只潜力科技龙头股一览,未来至少翻十倍,收藏待爆发!
- 摩根士丹利|摩根士丹利建议美股投资者逢低买入,荐股清单曝光(附股)
- 广州日报|预付式消费维权难?法院建议保存好凭证