Axure如何实现移动效果

时间:2024-10-20 15:55:53

在很多web的网页当中,经常会看到,在导航栏下方有一个条,当点击下一个选项的时候,那个滚动条就会自动移动到该条目之下,那么这个效果如何是用Axure来进行实现呢?

Axure如何实现移动效果

工具/原料

Axure RP

一、准备工作

1、首先,我们在画布当中添加一个文本标签,将其改为网站首页,改好字体大小,使用Ctrl,拖动,复制出多个,并更换相应的文字。

Axure如何实现移动效果
Axure如何实现移动效果

2、在第一个文本的下方,画出一个长条矩形,调整大小,并设置其相应的样式,具体如下图所示。

Axure如何实现移动效果

二、编辑事件

1、我们想要实现的效果是,当点击某一个选项的时候,改变他的颜色,并且矩形条移动到该选项的下方,所以,首先,我们需要对选项设置选中效果,将文字部分全选,然后右键,设置交互样式,选中,然后改变颜色。

Axure如何实现移动效果
Axure如何实现移动效果

2、交互样式设置好之后,还需要设置选项组名称,具体位置如下图所示,这里取名为菜单,矩形条取名为t。

Axure如何实现移动效果

3、对网站首页的文本设置鼠标的单击事件,鼠标选中时,设置选中状态为ture,同时设置移动效果。

Axure如何实现移动效果
Axure如何实现移动效果

4、矩形条的移动效果需要设置函数,x轴,直接选择设置x,鲻戟缒男y轴需要选择设置target,y,进行选择设置即可,移动位置选择为绝对位置,动画设置为线性,时间为200毫秒即可。

Axure如何实现移动效果
Axure如何实现移动效果

5、第一个网站首页设置好了之后,后面的几个文本框可以直接复制网站首页的case即可。

Axure如何实现移动效果

三、测试

1、选择预览之后,我们可以看到,当选择某一个按钮的时候,该按钮颜色就会变成交互设置的颜色,矩形条相应的会移动到该矩形条目之下。

Axure如何实现移动效果
Axure如何实现移动效果
© 手抄报圈