【案例分享 | 旅游出行app】Axure制作拖动进度条的交互效果（最详细）

嗨，大家好！今天给大家介绍，如何用axure制作拖动进度条的交互效果。

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

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

一、案例介绍
【视频教程】：哔哩哔哩视频

让我们来看下效果，可以通过拖动手柄来调整进度条，我们看下如何制作。

【效果预览】‘

二、案例步骤

首先，我们来创建我们需要的素材元素。添加一个矩形，将颜色修改成灰色，宽设置为320，高为10，去掉边框，作为进度条的底部，我们命名为“底部”。然后，复制一个矩形，将颜色修改成绿色，作为滑块，命名改为“滑块”。最后，添加一个椭圆形，宽高设置为26，颜色改为灰色，去掉边框，将其转换为动态面板，我们命名为“手柄”，作为滑动的手柄。

现在，右击矩形“滑块”，将其转换为动态面板，设置动态面板高为26，并调整进度条的初始长度。然后我们调整下拖动进度条的样式。

接下来，为椭圆形“手柄”添加“拖动时”的交互事件。设置“手柄”可以在水平方向拖动，同时限制左右界限为0至320，这里的320是矩形“底部”的长度。

然后，再添加一个动作，设置矩形“滑块”的尺寸。宽度为当前交互元件“手柄”的x轴位置=[[this.x]]，高度为“手柄”的高度设置为26，锚点选择左侧。这样，矩形“滑块”会跟随手柄的移动而展示相应的进度内容。

最后，全选所有元件，并将它们转换为一个动态面板。

现在，让我们一起来预览一下效果。可以看到，我们已经成功地实现了一个可拖动的进度条。
以上就是本次教程的全部内容。如果有任何问题，随时向我提问。下一个视频再见啦！