axure8.0快速入门新手教程:环形进度条

2017年4月20日 阅读:389

前面有讲过关于进度条的文章,请移步《axure原型设计之进度条》。这章也是关于进度条的,不过这是环形的,相对又偏复杂一点。虽然说一样是一个白色槽,一个灰色的条和一个数字的进度表示,但是,实现起来的逻辑确实完全不一样的。这里,就教大家如何使用axure8.0来制作这种环形进度条。

第一步:拖拉摆放好相关控件

首先,4个半圆环,一个白色上半圆环(上白),一个白色下半圆环(下白),一个灰色上半圆环(上灰),一个灰色下半圆环(下灰),排放层次为:下灰<下白<上灰<上白;

然后,上面盖两个椭圆,大的为透明底黑框,小的为白底黑框;

最后,中间一个文本标签,文字为“100%”。

第二步:为页面添加页面载入时用例

1、触发文本标签的显示时用例;

2、相对顺时针旋转“上灰”180度,锚点为底部,动画为线性,时间为3600毫秒;

3、等待3600毫秒;

4、将“下灰”至于顶层;

5、相对顺时针旋转“下灰”180度,锚点为顶部,动画为线性,时间为3600毫秒。

第三步:为文本标签添加显示时用例

1、设置文本标签的文字为ceil((“上灰”的角度+“下灰”的角度)/3.6);

2、等待0毫秒;

3、隐藏文本标签;

4、显示文本标签。

点击预览就可以看见环形进度条的动画效果了。同时也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

效果图:axure原型设计之环形进度条
更多原型案例:http://weidublog.com/index.php/2017/03/20/181/

作者:维度
转载请注明出处:http://weidublog.com/index.php/2017/04/20/502/

4条评论

  • 晓艳 2017年6月28日在下午2:50

    楼主,圆环是Axure 的标准组件么?我找了好几遍没好到。Axure RP8

    • 维度 2017年6月29日在下午12:10

      不是,用合并去除的方式可以做出来

      • 晓艳 2017年6月30日在上午11:16

        我用的方形圆环来合并去除,确实得到了半圆环。但是按教程的步骤将多个半圆环叠加的时候,方形的部份会遮住另一个半圆环。
        楼主是用什么来合并去除呢?或者合并去除后要做什么处理呢?

      • 晓艳 2017年6月30日在上午11:21

        我用的无边方形和圆环合并得到一个半圆环。但是按教程的步骤把四个半圆环叠加的进修,方形的部分会遮盖到另一个半圆环。
        楼主,你是用什么合并去除的呢?或者合并后要做什么处理呢?