水泡导航栏

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Axure 8

作者：LYQlife113

撰写时间：2021年10月18日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

今天我们再次用Axure 8来做一个案例，一个导航案例。

一、静态布局

1.导航样式

我们可以先在元件库里拉几个矩形出来，并让他们并排放置。

 

然后我们可以给一丢丢样式给这几个矩形（好看就行了）。

 

我们还可以再拉一个矩形到导航底部，这样显示我们这几个矩形缩小的时候左右没有缝隙。

 

2.水泡样式

然后我们再拉一个矩形出来让他来做水泡部分。

 

然后我们在给这个水泡加上一些样式看着好看点，加样式可以再头顶这个样式栏里加上去，然后并配对齐第一个矩形。

 

二、动态页面

这里我们的思路就是给我们这几个加上移动属性，让水泡进行移动。

首先设置第一个矩形，在交互事件里选择“鼠标移入时”。

 

添加动作里选择到“移动”，然后勾选到我们的水泡矩形，移动选择“绝对定位”。

 

然后接下来，我们就要设置水泡的x轴与y轴的位置了，x旁边有一个“fx”的图标，点击进去进行设置函数。

我们点击“插入变量或函数”，元件下面有一个x，选择到这个。

 

 

然后这里显示就为这样子，这段话的意思就是：this（当前）.x（x轴），当前x轴的位置。

 

然后设置好x轴之后就设置y轴位置，也是一样的，也是“this.y”，这样子的。

 

这两个设置好之后，动画可以给一个线性的过渡效果。

 

然后剩余的四个矩形就照着这段交互事件Ctrl+C，Ctrl+V复制粘贴就可以了（复制在每一个矩形里。）

 

 

然后我们这个案例就完成了。

想查看效果动画，就点击右上角的“预览按钮”点击查看就可以了。

 

好了，我们下次再见！