实现可拖动进度条

　　怎样用Axure实现拖动进度条？一起来看下吧
　　可拖动进度条的应用场景，例如调节APP屏幕亮度，音乐播放器的音量等。
　　效果如下（）
　　准备4个元件，如下所示：
　　一个圆形滑块；（用于触摸滑动）
　　一个矩形元件，填充色为灰色，改为圆角矩形；（作为进度条的底部背景色）
　　从2复制一个同样的圆角矩形元件，将填充色改为其他颜色；（作为进度提示的填充色）
　　一个文字元件。（显示百分比进度）
　　将2、3两个圆角矩形元件重叠，需要严丝合缝的重叠，设置x值和y值一致。
　　设置填充色元件的width0；因为初始状态进度是0的
　　然后将圆形滑块与进度条左侧对齐，布局调整为一个进度条该有的样子，如下图：
　　到这里，可以F5欣赏一下UI效果（。）
　　咦，圆形元件，为什么无法拖拽？说好的自由拖拽呢？
　　动态面板是唯一一个能够被拖动的元件，任何元件想要达到拖动的效果，必须放在动态面板中。并且，在动态面板的触发事件拖动时当中设置用例。所以要达到自由拖拽的效果，必须是动态面板，其他元件是没有这个功能的。
　　将圆形元件转换为动态面板：选中元件，点击右键amp；gt；转换为动态面板，动态面板的触发事件拖动时中，添加用例。
　　用例包含下列动作：
　　圆形滑块设置水平拖动，并且设置滑动拖动的左右边界，限制其拖动边界不超过bg背景元件的左右两侧。
　　圆形滑块转为动态面板后，在面板状态中，其位置是从（0，0）开始的，所以滑动范围是从0开始，即左侧leftamp；gt；0，限制滑动最大距离不超过进度条灰色元件的宽度，即右侧rightamp；lt；背景。width
　　进度条process跟随动态面板拖拽实现颜色填充。这里通过修改进度条的尺寸，实现填充色的前进进度。
　　如下图：
　　这里不得不提的就是锚点，anchor左侧，表示以该点作为作为原点，进行移动操作。
　　什么意思呢？
　　就是选择了左侧作为锚点，那么进度条填充色这个元件，左侧就是固定在这个锚点原点上，元件右侧进行拉伸放大。
　　进度条填充色元件尺寸放大，我们只改变元件的宽度，元件的高度使用初始默认设置的即可。
　　所以：宽度圆形滑块。x圆形滑块。width，高度进度条。height
　　设置颜色填充一直延伸到圆形滑块元件的右侧（其实左侧也是可以的，延伸到右侧，是为了滑块和进度条之间相切的地方不会有间隙）
　　如下图蓝色部分示意图：
　　这里用到了局部变量。
　　如下图：定义一个局部变量：circle，用来指代圆形滑块元件，在上方编辑区域，就可以通过局部变量cicrle获取到圆形滑块的一些数值了。
　　比如：circle。x，circle。width等
　　修改百分比进度的文字提示，如下图：
　　百分比进度条进度宽度背景总宽度。背景总宽度是固定的，所以百分比的值是依赖于进度条宽度，而进度条宽度是依赖于圆形滑块拖动的距离。
　　总体而言是：
　　圆形滑块拖动amp；gt；进度条填充色宽度改变amp；gt；百分比文字效果改变
　　文字百分比计算，如下图红色部分所示：
　　这里分子分母分别都减掉了一个圆形滑块的宽度：circle。width（circle即为圆形滑块）
　　为什么要这么处理呢？（以下4步，有些繁琐，不看也没关系，直接使用结论就好（））
　　限制了圆形滑块的滑动区间，〔0，bg。width〕；（bg即为灰色背景）
　　设置了进度条长度，process。widthcircle。xcircle。width；（process即为红色进度条）
　　假设使用process。width直接算百分比。当进度0时，百分比0process。widthbg。width，在这里，根据条件2中，process。widthcircle。xcircle。width，百分比0的情况，此时圆形滑块左侧与进度图相切circle。x0，必须满足circle。width0，但是circle。width！0，会导致滑块滑动到起点0的位置，但是百分比amp；gt；0。所以百分比process。widthcircle。widthbg。width；
　　在3的条件下，即百分比process。widthcircle。widthbg。width，当进度100时，百分比1process。widthcircle。widthbg。width，根据条件2，process。widthcircle。xcircle。width，此时百分比circle。xcircle。widthcircle。widthbg。widthcircle。xbg。width，显而易见的：circle。xamp；lt；bg。width，百分比amp；lt；100，在circle。xbg。widthcircle。width；所以百分比process。widthcircle。widthbg。widthcircle。width；
　　以上设置完，万事大吉了吗？
　　并没有，因为拖动过程中，百分比除出来的结果可能除不尽，小数点位数特别长长长，我们要对结果进行保留小数位。
　　这里介绍几个函数：
　　1。toExponential（decimalPoints）
　　用途：把数值转换为指数计数法。
　　参数：decimalPoints为保留小数的位数。
　　2。toFixed（decimalPoints）
　　用途：将一个数字转为保留指定位数的小数，小数位数超出指定位数时进行四舍五入。
　　参数：decimalPoints为保留小数的位数。
　　3。toPrecision（length）
　　用途：把数字格式化为指定的长度。
　　参数：length为格式化后的数字长度，小数点不计入长度。
　　我们选择第二个toFixed，保留指定小数位，并且超出部分进行四舍五入。
　　这个函数怎么用呢？
　　例如：保留2为小数，并四舍五入，LVAR。toFixed（2），LVAR是什么呢？
　　就是求出来的结果。
　　LVAR（process。widthcircle。width）100（bg。widthcircle。width）；（乘以100，是换算成百分比）
　　LVAR。toFixed（2）
　　加上变量格式〔〔LVAR。toFixed（2）〕〕
　　加上百分比符号〔〔LVAR。toFixed（2）〕〕
　　最后替换上LVAR的值，〔〔（（process。widthcircle。width）100（bg。widthcircle。width））。toFixed（2）〕〕
　　完美
　　总结
　　拖拽的滑块，转换为动态面板
　　设置滑块水平拖动，设置左右边界〔0，bg。width〕；
　　设置进度条颜色填充效果，利用设置尺寸的操作，设置左侧锚点，宽度为circle。xcircle。width，高度为process。height；
　　根据进度条元件的宽度，计算进度百分比（process。widthcircle。width）（bg。widthcircle。width）；
　　设置百分比数值保留小数点位数。
　　以上