Axure RP9 进度条设置

Axure里面的动态面板，很强大！必须夸一下👍

Axure RP9 进度条

利用Axure可以把很多小工具🔧、功能当作模版来使用。分享一下进度条的设置。以下一些样式参数，例如颜色、命名、长度、宽度等，均可根据实际情况做更改。

进度条：

一、进度条元件布置

1、灰色背景设置：在右侧拖入一个矩形元件，设置矩形样式，并命名为：灰色背景；
这里设置的是灰色填充、无边框、长500、宽5：

2、设置动态进度：在右侧拖入一个动态面板，大小设置为长5、宽5；命名为：进度条
注意：这里的长度最好与灰色背景成整数百分比；宽度与灰色背景保持一致
进度条与灰色背景居左对齐

动态面板填充设置如图：
填充为蓝色（可自定义），与灰色背景作区分

3、设置百分比：在右侧拖入一个文本标签，输入“0%”，调整样式，命名为：百分比；

最后，把三个元件选中转为动态面板，进度条的布置就完成了

二、交互样式设置

这里需要设置进度条尺寸和百分比的文本的变化。

1、针对三元件动态面板的交互设置

（1）进度条：设置尺寸
选中动态面板，点击交互选择【载入时-设置尺寸-选择进度条】

进度条的宽设置为：[[bg.width/100]]
进度条的高设置为：[[bg.height]]

（2）设置百分比

还是选中动态面板，在【载入时】添加动作【设置文本-选择百分比】

百分比的值设置为：[[Math.ceil(jdt.width/bg.width*100)]]%

（3）设置进度条显示

选中动态面板，在【载入时】添加动作【显示-选择进度条】

2、针对进度条动态面板交互设置

具体设置如下：

（1）选中进度条动态面板，点击交互选择【状态改变时-设置尺寸-选择进度条】
进度条的宽：[[This.width+bg.width/100]]
进度条的高：[[bg.height]]


（2）选中进度条动态面板，在【状态改变时】添加动作【设置文本-选择百分比】
百分比的值设置为：[[Math.ceil(jdt.width/bg.width*100)]]%

（3）设置启用情形

条件设置为：如果“[[jdt.width]]” < "[[bg.width]]"才触发

（4）选中进度条动态面板，点击交互选择【尺寸改变时-等待-设置为50】

（5）选中进度条动态面板，在【尺寸改变时】添加动作【设置面板状态-选择进度条】

===========================================================================================

模版下载分享

Axure RP9 进度条设置模版下载

https://download.csdn.net/download/M_try/20080327

Axure RP9 轮播图设置模版下载

https://download.csdn.net/download/M_try/20085171

Axure RP9 滑动选择条设置模版下载

https://download.csdn.net/download/M_try/20087510

Axure RP9 手风琴效果设置模版下载

https://download.csdn.net/download/M_try/20087520

====================================================================

分享，多担待。望有帮助