【案例分享 | 旅游出行app】Axure制作Tab导航切换的交互效果（最详细）

哈喽，大家好！今天给大家介绍，如何制作Tab导航切换的交互效果。

【案例预览地址含下载】电脑打开链接：https://s7jq10.axshare.com/

【完整案例作品预览含下载】：https://fx2z9z.axshare.com

一、案例介绍

【视频教程】：哔哩哔哩视频

首先，让我们来看下效果，点击Tab导航，可以切换到对应的界面内容，并且横线也会随之滑动。接下来，我们看下如何制作。

【效果预览】

二、案例步骤

首先我们来画一下界面需要的元件素材，在这里我们拉出一个矩形，并调整好尺寸大小，去掉边框。然后再拉出一个文本标签，编辑为”综合“，命名为tab1，再复制粘贴三个文本，分别编辑为”酒店“、”游记“、”用户“，然后命名为tab2、tab3、tab4，并调整下间距。然后再拉出一个矩形作为选中的横线，调整好尺寸大小，去掉边框，设置颜色为蓝色，命名为”下滑“。再拉出一个”水平线“，这里我们颜色改淡一些。

接下来我们开始做切换的内容部分。这里我已经提前准备好了，切换的内容素材。我们全选”内容1“，并右击将其转换为动态面板，双击进入到创建好的动作面板中。在这里我们新增多个面板状态，并依次粘贴我们事先准备好的内容。

接下来我们开始做交互部分。

我们首先要做的效果是，点击Tab选项卡，并且横线也会随之滑动。

那我们先在tab1上去加，“鼠标单机时”的交互事件，添加“移动”动作，并选择“下滑”元件。在移动选项中，我们选择“绝对位置”，意思是选择的元件（下滑）将以（0,0）为基点进行移动。

我们将x的值设置为当前交互元件（Tab1）x轴所在的位置 [[This.x]]，我们将y的值设置为当前交互元件（Tab1）y轴所在的位置并下移30 [[this.y+30]]。动画选择缓进缓出，时间300毫秒。

接着我们再去做点击Tab1展示state1的内容。添加”设置面板状态“动作，选中"动态面板""，选择状态为state1。

然后我们复制tab1的交互事件，粘贴到tab2、tab3、tab4上中。再修改，当点击tab2展示state2的内容，当点击tab3展示state3的内容，当点击tab4展示state4的内容。

以上效果就做完了，我们预览看下效果。可以看到，点击Tab导航，会切换到对应的界面内容，并且横线也会随之滑动。

以上就是本次教程的全部内容。如果大家在操作过程中遇到问题，欢迎在下方留言。那我们下一个视频再见啦！