建立自己的元件库(三)——进度条

有时候越简单的元件，使用率越高，我们要坚持维护自己的元件库，不要因为是一个小元件而放过他，这样时间长了才能为我们的工作节省很多时间！

我在上一篇文章中写了一个比较简单的验证码元件的实现，今天依旧是一款简单的元件。

提示：我用的是Axure8.0，可能文中的某些操作，7.0不支持，但制作思路基本相同。

元件名称：

进度条

功能描述：

1. 点击开始，进度条变化。
2. 到100%，进度条停止变化

方法/步骤：

第一步：画出对应的组件

1.先把进度条画出来

1)拖进1个矩形，名称为“背景”。

填充色为白色，边框为黑色，大小385*30，圆角半径为5（根据使用者具体情况而定）。

2)拖进1个矩形，名称为“进度条”，大小、圆角半径与上一个矩形一样。

填充色为灰色，边框为黑色（根据使用者具体情况而定）。

3)拖进一个文本标签，名称为“进度”。

字体“微软雅黑”，字体大小12（依然是根据使用者具体情况而定^_^）。

样子如下图1，整理后如下图2，“进度条”矩形压在“背景”矩形上。

4)全选，右键转换为动态面板，名称为“进度条all”。

ok啦，进度条的主要组件我们就画好了，下面就开始画辅助的组件了。

2..拖进一个按钮，名称为“开始”，如下图。

3.拖进一个动态面板，名称为“time”，建立两个状态，state1、state2。这个动态面板是用来控制进度的，所以里面不用放组件。我为了上图的时候清楚些，把state1的背景设为了黑色，如下图。

ok，到这里我们所需要的组件就已经画完了。

第二步：让进度条动起来

此步骤要实现进度条初始为0%，每隔1s走10%的进度。

1.设置进度条的初始状态——给“进度条all”动态面板添加“载入时”事件。

当“进度条all”动态面板第一次载入的时候，“进度条”矩形大小设为0*0，“进度”文本设为“0%”，如下图。

2.给“开始”按钮添加“鼠标单击时”事件。

单击“开始”时，让“time”动态面板状态开始循环，每个1s改变一次状态，如下图。

注：要把“首个状态延时1000毫秒后切换”勾选上。

3.给“time”动态面板添加“状态改变时”事件

此步骤的目的是让“进度条”矩形的长度跟着“time”动态面板状态的变化而变化。

1)添加变量值n，初始值为0,。设置变量值n=n+1。（此步骤的目的是让变量值每隔1s自增1，后面用来控制“进度条”矩形的长度。）

2)在同一个事件里，设置“进度条”矩形的宽为[(变量值n）*(“背景”矩形长度)/10]，高不变，如下图。

点击“fx”，弹出“编辑值”对话框，选择“添加局部变量”，LVAR1=元件——背景，如下图。

选择“插入变量或函数”，设置宽度=n*LVAR1.width/10，如下图。此步骤也可以直接输入。

2)仍然在同一个事件里，设置“进度”文本标签的文本为[(变量值n）*10]%，如下图。

注意一定要把百分号写在“[[]]”双括号的外面。

ok，这样我们的进度条就动起来了，F5预览一下吧。

第三步：让进度条停下来

预览之后，我们会发现，进度条一直在走，没有停下来。此步骤要实现的就是让进度条到100%时停下来。

这个步骤很简单，只需要给上面的事件（即“time”动态面板的“状态改变时”事件）添加一个条件即可，如下图。

又一个简单的小元件完成了，在预览看看吧！

本文由 @ningmengsuan 原创发布于人人都是产品经理。未经许可，禁止转载。