Axure RP9教程 音量滑块

一、说明

音量滑块设置在PC端及移动端的应用场景相对较少，但在播放器类APP应用场景相对较广，例如调节视频的亮度、声音等等。如何来实现这种交互效果呢？接下来我们会用到动态面板的元件跟随来实现

二、效果显示

案例链接：https://f9d9x0.axshare.com/

三、操作步骤

1. 在画布中添加一个矩形框：500 x 32，圆角设置为16；

2. 选中画布中矩形框Ctrl+D复制一个矩形框，将背景设置为绿色，用作覆盖层；

3. 将覆盖层矩形边框设置为0，长宽分别减少2个单位，目的是覆盖层不会讲底层边框覆盖掉；

4. 将覆盖层与底层重合后，右键创建动态面板，双击进入动态面板，将调整大小以适应内容勾选取消；

5. 将覆盖层动态面板初始位置X坐标设置为-495，确保矩形填充块右侧与底部左侧对齐
   

6. 再回到画布中添加滑块按钮，半径为30，如何确保长款一致呢？在工具栏区域启用更改为操作如下：
   

（一）、设置滑块拖动效果

7. 给滑动块动态面板添加动态面板拖动时交互效果，同时设置移动面板跟随，设置移动方向：沿X轴移动，边界左>=0，右<=500,操作演示如下：
   
8. 再次看下预览效
   
   3.我们发现滑块推动时，覆盖层绿色矩形并没有跟随，接下来的演示具体操作
   
9. 单击保存，预览实现最终效果。