Axure8.0原型：小白改进版环形进度条

今天在网上看到了几篇关于环形进度条的Axure教程，由于天性愚钝，学了一整天才弄懂其原理，但是强迫症的细胞告诉我网上的几篇教程不太完美，于是我跳进了产品经理最忌讳的坑——追求完美。

不只是进度条，很多模块都有很多方法，勤于思考就能用不同的方法做出来，活学活用，共勉。

一、元件准备

如上图所示：

1、尺寸为202*202圆形1个，并命名为“外环”；

2、尺寸为148*148圆形1个，并命名为“内环”；

3、按钮1个，命名为“开始”，作为触发按钮；

4、尺寸202*202大圆与152*152小圆组合而成的四分之一圆环1个，颜色填充为白色（图中是为了显示出来才临时填充的灰色），组合命名为“白条”，ps：尺寸之所以和元件5不同是为了避免圆心叠加时露出红色的边；

5、尺寸为200*200大圆与150*150小圆组合而成的四分之一圆环4个，组合时大圆填充红色，小圆填充白色，组合分别命名为“红条1234”。

二、元件摆放位置

1、将“外环”置于最底层；

2、将“红条1234”分别于“外环”圆心重合放置；

3、将“白条”与“外环”圆心重合放置，此时白条会遮挡住红条，在元件准备时之所以让白条尺寸略大于红条尺寸，就是为了遮挡住红条的边缘颜色，实现完全遮挡，不留瑕疵；

4、将“内环”与“外环”圆心重合放置；

5、最后将“开始”按钮放置自己喜欢的位置。

如下图所示：

三、添加用例

对“开始”按钮做“鼠标单击时”事件：

具体过程：

旋转“红条1”to 90度，汉化项是“到达”，顺时针，线性，200ms→旋转“红条2”to 180度，顺时针，线性，400ms→旋转“红条3”to 270度，顺时针，线性，600ms→旋转“红条4”to 180度（注意：这个地方先旋转180度与红条2重合），顺时针，线性，400ms→等待400ms→将“红条4”置于顶层→将“内环”置于顶层→旋转“红条4”by 180度，汉化项是“经过”，线性，400ms→F5看一下效果吧。

四、难点解释

1、四个红条是如何旋转的？

最初4个红条是叠加在一起的，开始旋转时其实4个红条是同时旋转的，只是4个红条的最终位置不一样，就像跑步，一声枪响同时起跑，第一个人跑了1/4停下了，第二个人跑了2/4停下了，第三个人跑了3/4停下了，只有第四个人跑完了全程。同理，顺时针90度是红条1停下的位置，180度是红条2停下的位置，270度是红条3停下的位置，360度是红条4停下的位置，但是为什么先让红条4旋转到180度，中间停顿一下呢？下面解释。

2、为什么先让红条4旋转180度？

聪明的同学肯定已经看出来了！如果让红条4直接旋转到360度，那么它会被那个最初遮挡红条的白条所遮挡，这样红条4旋转360度就相当于做的无用功。所以，我们需要让红条4分两步旋转，中间停留一下让其置于顶层，这样到最终位置就不会被白条遮挡。

3、为什么最终又让内环置于顶层？

大家可以试试，不将内环置于顶层有什么影响。PS.其实还是为了追求细节啦，哈哈哈….

4、时间上有什么关系？200ms、400ms、600ms、800ms有什么联系？

其实这是从物理学上运动的过程考虑的，红条1234旋转的路程是一种倍数关系，如果想让进度条实现均匀递增，那么时间上也应该保持倍数关系。红条4的完整运动时间其实是800ms，大家可以试一下调整时间做非匀速递增的进度条，我没有试哦。

5、为什么红条4第一次旋转用的“to”，第二次旋转用的“by”？

其实这是个英语问题，到达那里用介词“to”，经过哪里用介词“by”。红条4第一次旋转时，它的开始位置是0度那里，第二次旋转时，如果选择“to”会把第一次旋转后的180度位置当成新的起点，这个地点相当于一个新的起点，如果还用“to”，就是在新起点的参照上到达一个固定位置。PS：其实本案例里这一步用“to”或“by”结果是一样的，纯属巧合，但是道理是不一样的，关于to和by的区别大家一定要弄懂。

五、Bug

进度条达到100%后，反复点击“开始”按钮看看有什么效果，我不会告诉你有bug哦….

相关阅读：

Axure 8.0实例｜简单实用的进度条

Axure教程——页面载入进度条

Axure设计思考：Axure 7.0与Axure 8.0做进度条区别

关于Axure进度条制作的方法，这篇文章讲得最全面！

 

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