进度条是制作原型时常用的组件,圆形进度条更是在加载中常见的,我们使用矩形的变换和旋转来实现:
工具/原料
axure8.0beta版
方法/步骤
1、使用矩形元件进行变形,变化为一个半圆:具体方式详见图片1,然后设置其大小100、50;圆角50,边框最粗,颜色:绿色,效果如下图:
2、画出一个半圆?有了半圆然蒹筻分虞后在旋转,是不是有了进度条的基础。对半圆进行命名:半圆A,然后设置页面载入时交互用例,一定按照下图设置晗稍噔猷:旋转(经过),角度(180),方向(顺时针),锚点(底部),动画(线性),时间(5000ms)
3、第二部完成后,我们可以预览一下,是不是我们要的效果,为了更加形象,我们拉出一个矩形(设置底部对齐,命名为:矩形),查看效果:
4、根据前三步,我们完成了一个圆形进度条的核心部分,下面我们来继续制作:将半圆A复制一个水貔藻疽,并命名为:半圆B,位置按照下图所示:让两个半圆刚好组合为一个圆(便于效果演示)
5、设置:遮挡与半圆A,底部对齐,遮挡:无边框设置:半圆B隐藏
6、设置交互示例:点击:半圆A,添邹菁惨挣加:等待事件,设置等待时间为5000ms,然后添加显示/隐藏事件:隐藏遮挡这样当半圆A旋转完成时,我们让遮挡隐藏,让半圆B显示,且开始旋转,就可以接着A的旋转继续.
7、按照第六步思路,添加遮挡隐藏时交互用例,设置半圆B显示,并旋转:锚点(顶部)
8、到此,我们设置完成,按下F5,进行预览,效果图如下: