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

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

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

axureyuandfadsfds

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

一、元件准备

元件

如上图所示:

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、最后将“开始”按钮放置自己喜欢的位置。

如下图所示:

位置

三、添加用例

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

111

具体过程:

旋转“红条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进度条制作的方法,这篇文章讲得最全面!

 

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

您的赞赏,是对我创作的最大鼓励。
2人打赏

评论( 4

登录后参与评论
  1. 你确定锚点是中心 :o

    回复
    1. 回复

      我确定,创建的四分之一圆环虽然显示的是四分之一圆环,但是它的中心还是作为一个完整的圆时的中心,在Axure里点击四分之一圆环时,选中的边框还是把一个圆完整包围的边框。

    2. 回复

      你是怎么做四分之一圆环的?做法不一样,我做出来边框也是四分之一

    3. 回复

      拉入两个圆,一大一小,圆心重叠放置,鼠标点击圆,边框旁边会出现一个灰色小圆点,点击那个小圆点可以转换形状,选择带缺口的那个圆(第一行第四个),然后圆的缺口处会出现两个小黄点,那两个小黄点可以拖动改变变成扇形,调整成圆心为90度的扇形,两个90度扇形圆心叠加,然后Axure顶部有个“组合”按钮,把两个90度扇形组合,这时候就变成了四分之一圆环。我这样做的四分之一圆环的圆心还是一个完整圆时的圆心,不影响它的旋转轴心。

加载中