建立自己的元件库（三）进度条

　　有时候越简单的元件，使用率越高，我们要坚持维护自己的元件库，不要因为是一个小元件而放过他，这样时间长了才能为我们的工作节省很多时间！
　　我在上一篇文章中写了一个比较简单的验证码元件的实现，今天依旧是一款简单的元件。
　　提示：我用的是Axure8。0，可能文中的某些操作，7。0不支持，但制作思路基本相同。
　　元件名称：
　　进度条
　　功能描述：
　　点击开始，进度条变化。
　　到100，进度条停止变化
　　方法步骤：
　　第一步：画出对应的组件
　　1。先把进度条画出来
　　1）拖进1个矩形，名称为“背景”。
　　填充色为白色，边框为黑色，大小38530，圆角半径为5（根据使用者具体情况而定）。
　　2）拖进1个矩形，名称为“进度条”，大小、圆角半径与上一个矩形一样。
　　填充色为灰色，边框为黑色（根据使用者具体情况而定）。
　　3）拖进一个文本标签，名称为“进度”。
　　字体“微软雅黑”，字体大小12（依然是根据使用者具体情况而定）。
　　样子如下图1，整理后如下图2，“进度条”矩形压在“背景”矩形上。
　　4）全选，右键转换为动态面板，名称为“进度条all”。
　　ok啦，进度条的主要组件我们就画好了，下面就开始画辅助的组件了。
　　2。。拖进一个按钮，名称为“开始”，如下图。
　　3。拖进一个动态面板，名称为“time”，建立两个状态，state1、state2。这个动态面板是用来控制进度的，所以里面不用放组件。我为了上图的时候清楚些，把state1的背景设为了黑色，如下图。
　　ok，到这里我们所需要的组件就已经画完了。
　　第二步：让进度条动起来
　　此步骤要实现进度条初始为0，每隔1s走10的进度。
　　1。设置进度条的初始状态给“进度条all”动态面板添加“载入时”事件。
　　当“进度条all”动态面板第一次载入的时候，“进度条”矩形大小设为00，“进度”文本设为“0”，如下图。
　　2。给“开始”按钮添加“鼠标单击时”事件。
　　单击“开始”时，让“time”动态面板状态开始循环，每个1s改变一次状态，如下图。
　　注：要把“首个状态延时1000毫秒后切换”勾选上。
　　3。给“time”动态面板添加“状态改变时”事件
　　此步骤的目的是让“进度条”矩形的长度跟着“time”动态面板状态的变化而变化。
　　1）添加变量值n，初始值为0，。设置变量值nn1。（此步骤的目的是让变量值每隔1s自增1，后面用来控制“进度条”矩形的长度。）
　　2）在同一个事件里，设置“进度条”矩形的宽为〔（变量值n）（“背景”矩形长度）10〕，高不变，如下图。
　　点击“fx”，弹出“编辑值”对话框，选择“添加局部变量”，LVAR1元件背景，如下图。
　　选择“插入变量或函数”，设置宽度nLVAR1。width10，如下图。此步骤也可以直接输入。
　　2）仍然在同一个事件里，设置“进度”文本标签的文本为〔（变量值n）10〕，如下图。
　　注意一定要把百分号写在“〔〔〕〕”双括号的外面。
　　ok，这样我们的进度条就动起来了，F5预览一下吧。
　　第三步：让进度条停下来
　　预览之后，我们会发现，进度条一直在走，没有停下来。此步骤要实现的就是让进度条到100时停下来。
　　这个步骤很简单，只需要给上面的事件（即“time”动态面板的“状态改变时”事件）添加一个条件即可，如下图。
　　又一个简单的小元件完成了，在预览看看吧！
　　建立自己的元件库（一）轮播图
　　建立自己的元件库（二）验证码