Axure制作圆形进度条

 时间:2024-09-21 19:27:26

进度条是制作原型时常用的组件,圆形进度条更是在加载中常见的,我们使用矩形的变换和旋转来实现:

Axure制作圆形进度条

工具/原料

axure8.0beta版

方法/步骤

1、使用矩形元件进行变形,变化为一个半圆:具体方式详见图片1,然后设置其大小100、50;圆角50,边框最粗,颜色:绿色,效果如下图:

Axure制作圆形进度条

Axure制作圆形进度条

2、画出一个半圆?有了半圆然蒹筻分虞后在旋转,是不是有了进度条的基础。对半圆进行命名:半圆A,然后设置页面载入时交互用例,一定按照下图设置晗稍噔猷:旋转(经过),角度(180),方向(顺时针),锚点(底部),动画(线性),时间(5000ms)

Axure制作圆形进度条

Axure制作圆形进度条

3、第二部完成后,我们可以预览一下,是不是我们要的效果,为了更加形象,我们拉出一个矩形(设置底部对齐,命名为:矩形),查看效果:

Axure制作圆形进度条

Axure制作圆形进度条

4、根据前三步,我们完成了一个圆形进度条的核心部分,下面我们来继续制作:将半圆A复制一个水貔藻疽,并命名为:半圆B,位置按照下图所示:让两个半圆刚好组合为一个圆(便于效果演示)

Axure制作圆形进度条

5、设置:遮挡与半圆A,底部对齐,遮挡:无边框设置:半圆B隐藏

Axure制作圆形进度条

Axure制作圆形进度条

6、设置交互示例:点击:半圆A,添邹菁惨挣加:等待事件,设置等待时间为5000ms,然后添加显示/隐藏事件:隐藏遮挡这样当半圆A旋转完成时,我们让遮挡隐藏,让半圆B显示,且开始旋转,就可以接着A的旋转继续.

Axure制作圆形进度条

Axure制作圆形进度条

7、按照第六步思路,添加遮挡隐藏时交互用例,设置半圆B显示,并旋转:锚点(顶部)

Axure制作圆形进度条

Axure制作圆形进度条

8、到此,我们设置完成,按下F5,进行预览,效果图如下:

Axure制作圆形进度条

Photoshop 图层转为智能对象的好处 InDesign参考线怎么添加边缘对齐 illustrator制作【新品上市】促销海报艺术字 360搜索快照怎样更新 HitFilm Express:如何在图层内设置关键帧
热门搜索
卷发发型图片 欧美图片网 杨幂最新图片 腿模图片 老太婆图片