Axure显示进度的横向滑块

谁践踏了优雅 2022-09-02 01:14 151阅读 0赞

下载地址：点击下载>>https://www.axure.com.cn/wp-content/uploads/2016/01/jindutiao.zip  
预览地址：http://ybt2uz.axshare.cn/\#g=1&p=index

构成元件就三个。

1、一个背景（矩形，宽600，高30，圆角半径15）命名为beijing.

2、一个进度条（复制背景，设置背景颜色为蓝色，宽度设置为30）命名为jindu。

3、一个圆形。将圆形转换成动态面板。命名为yuanquan.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjYxODAw_size_16_color_FFFFFF_t_70]  
为了方便理解，进度条是靠着Y轴的，这样可以少考虑一个参数。

拖动圆形（动态面板）的时候，添加三个交互：

1、移动当前元件，水平拖动。设置拖动边界，左侧大于等于0，右侧小于等于背景的长度。

这一步是让这个圆圈在背景条上可以拖动起来。

2、设置进度条的尺寸，宽度为：\[\[yuanquan.x+yuanquan.width\]\]，注意要添加局部变量yuanquan指的是动态面板圆圈。锚点在左侧。

这一步是让进度条跟着动起来。

3.设置圆形上的元件文字=\[\[Math.floor((jindu.width-30)\*100/570)\]\]，注意添加局部变量。

这个是设置圆形上的文字。公式计算的是当前位置的百分比。由于本身有30宽，所以计算百分比的时候分子分母都需要减去30。不然就不是从零开始的了。Math.floor()是向下取整，也就是把小数点后面的数字抹掉，不然算出来会有长尾巴。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjYxODAw_size_16_color_FFFFFF_t_70 1]  
这样就做完了，新手要注意一下三个元件的层级顺序，圆圈在最上面，进度在中间，背景在最底下。在概要面板里面可以拖动调整元件的层级。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjYxODAw_size_16_color_FFFFFF_t_70]: /images/20220829/cdae55800b584d21abfe11c61a40ddf6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjYxODAw_size_16_color_FFFFFF_t_70 1]: /images/20220829/01501c0931a547e29be0b05c94189040.png