最新消息:本站教程基于Axure RP 9.0.0.3723及更高版本,请在学习前确认软件版本是否符合要求,以免因为界面差异导致学习障碍!

可以拖动的滑块

教程 小楼一夜听春语 903浏览

在Axure RP 9+的自带元件库“Sample UI Patterns”中,有一个名为“滑块”的元件。

结合我们已经掌握《局部变量的应用》、《系统变量的应用》以及《动态面板的应用(4)》,这个元件我们可以自己完成。

首先,准备好需要的元件,包括:

一个灰色的无边框矩形,命名为“轨道”,高度是2像素,宽度是200像素,圆角半径2~100都可以,看上去一个鸟样。

一个蓝色的无边框矩形,命名为“进度”,高度是2像素,圆角半径2~100都可以。

一个圆形,宽高是30像素,转为动态面板之后,命名为“滑块”。

把“滑块”面板与“轨道”元件中心对齐,再把“进度”元件覆盖“轨道”元件上方,调整为适合的宽度。

然后,我们先添加拖动滑块的交互。

为“滑块”面板添加[拖动时]的交互,[移动]自身[跟随水平拖动]。

并且,添加移动范围的[边界],左侧要大于等于“轨道”元件的左边界,右侧小于等于“轨道”元件的右边界。

这样才能在拖动滑块时,始终在轨道内移动。

“轨道”元件的两侧边界,我们添加局部变量[Track]获取[元件],再通过局部变量调用元件的属性[left]与[right],也就是元件左右边界的坐标值。

此时,在浏览器中查看原型的话,滑块已经能够在轨道内被拖动了。

但是,蓝色的“进度”不会跟随改变宽度。

所以,我们需要再为[拖动时]的交互[添加动作],为[进度]元件[设置尺寸]。

[高度]保持不变,可以填写目标元件的高度,也就是“Target.height”。

[宽度]需要计算。

公式很简单,就是滑块左侧的边界值与轨道左侧边界值的差。

我们通过系统变量“This”获取当前“滑块”元件,并调用“x”属性值,这个值与“left”相同,可以使用任何一个。

再通过局部变量添加局部变量[Track]获取[元件],然后调用元件的属性“x”。

在公式中,让他们相减,以计算出“进度”元件的宽度。

到这里,案例内容就全部完成了。

/案例源文件/

无情嘲笑:跳转到百度了是吧?都告诉你是软件自带元件库中的元件了,干嘛还要下载源文件呢?

不习惯看文字教程?还有《Axure RP 9萌新修炼视频》奉上!

转载请注明:iaxure.com » 可以拖动的滑块