Axure：实现可拖动进度条

怎样用Axure实现拖动进度条？一起来看下吧~

可拖动进度条的应用场景，例如调节APP屏幕亮度，音乐播放器的音量等。

效果如下(●ˇ∀ˇ●)

准备4个元件，如下所示：

一个圆形滑块；（用于触摸滑动）

一个矩形元件，填充色为灰色，改为圆角矩形；（作为进度条的底部背景色）

从2复制一个同样的圆角矩形元件，将填充色改为其他颜色；（作为进度提示的填充色）

一个文字元件。（显示百分比进度）

将2、3两个圆角矩形元件重叠，需要严丝合缝的重叠，设置x值和y值一致。

设置填充色元件的width=0；因为初始状态进度是0的~

然后将圆形滑块与进度条左侧对齐，布局调整为一个进度条该有的样子 ，如下图：

到这里，可以F5欣赏一下UI效果(。・∀・)ノ

咦，圆形元件，为什么无法拖拽？说好的自由拖拽呢？

动态面板是唯一一个能够被拖动的元件，任何元件想要达到拖动的效果，必须放在动态面板中。并且，在动态面板的触发事件“拖动时”当中设置用例。所以要达到自由拖拽的效果，必须是动态面板，其他元件是没有这个功能的。

将圆形元件转换为动态面板：选中元件，点击右键>转换为动态面板，动态面板的触发事件“拖动时”中，添加用例。

用例包含下列动作：

圆形滑块设置水平拖动，并且设置滑动拖动的左右边界，限制其拖动边界不超过bg背景元件的左右两侧。

圆形滑块转为动态面板后，在面板状态中，其位置是从（0，0）开始的，所以滑动范围是从0开始，即左侧left>=0，限制滑动最大距离不超过进度条灰色元件的宽度，即右侧right<=背景.width

进度条process跟随动态面板拖拽实现颜色填充。这里通过修改进度条的尺寸，实现填充色的前进进度。

如下图：

这里不得不提的就是锚点，anchor 左侧，表示以该点作为作为原点，进行移动操作。

什么意思呢？

就是选择了左侧作为锚点，那么进度条填充色这个元件，左侧就是固定在这个锚点原点上，元件右侧进行拉伸放大。

进度条填充色元件尺寸放大，我们只改变元件的宽度，元件的高度使用初始默认设置的即可。

所以：宽度=圆形滑块.x+圆形滑块.width，高度=进度条.height

设置颜色填充一直延伸到圆形滑块元件的右侧（其实左侧也是可以的，延伸到右侧，是为了滑块和进度条之间相切的地方不会有间隙）

如下图蓝色部分示意图：

这里用到了局部变量。

如下图：定义一个局部变量：circle，用来指代圆形滑块元件，在上方编辑区域，就可以通过局部变量cicrle获取到圆形滑块的一些数值了。

比如：circle.x，circle.width等

修改百分比进度的文字提示，如下图：

百分比=进度条进度宽度/背景总宽度。背景总宽度是固定的，所以百分比的值是依赖于进度条宽度，而进度条宽度是依赖于圆形滑块拖动的距离。

总体而言是：

圆形滑块拖动->进度条填充色宽度改变->百分比文字效果改变

文字百分比计算，如下图红色部分所示：

这里分子分母分别都减掉了一个圆形滑块的宽度：circle.width（circle即为圆形滑块）

为什么要这么处理呢？（以下4步，有些繁琐，不看也没关系，直接使用结论就好(⓿_⓿)）

限制了圆形滑块的滑动区间，[0，bg.width]；(bg即为灰色背景)

设置了进度条长度，process.width = circle.x+circle.width；（process即为红色进度条）