案例8.   形状：制作环形进度条

案例来源:

中国移动APP-流量管家

 

案例效果：

• 整体界面效果：（图1-41）

• 原型实现效果：（图1-42）

案例描述：

环状带缺口的背景条与进度条。

 

元件准备：

• 页面中：（图1-43）

思路分析：

通过自定义形状功能可以实现环形进度条的制作。

 

操作步骤：

• 拖入一个矩形到画布，转换为带缺口的圆形；（图1-44）

• 调整圆形尺寸为宽260*高260，缺口为1/4大小；（图1-45）

• 拖入一个椭圆形到画布，尺寸设置为宽230*高230，将其与带缺口的圆形中心对齐；（图1-46）

• 先点击选中带缺口的圆形，再点击选中内部的圆形；然后，在属性中点击【去除】的图标将两个形状改变成一个新的环形形状；最后，为圆环设置灰色的边框与背景色；（图1-47）

• 再次拖入两个矩形，转换成半圆形，尺寸为宽15*高10；然后，将两个半圆形旋转为合适的角度，摆放到环形形状缺口的两端；点击选中圆环，再分别选择两个半圆形，点击属性中的【合并】图标，完成背景形状的制作。（图1-48）

• 在样式中设置元件的角度{Rº}为225度，变成缺口朝下的效果。（图1-49）

• 参照步骤1~4完成进度条的制作，并将其放到与背景条重合的位置上。（图1-50）

• 最后添加其他元件，完成整个案例的制作。（图1-51）

补充说明：

注意在做形状的合并与去除时，元件的选择顺序不能颠倒。先选择主体元件，再选择被合并或者去除的部分。

---------------------------------------------------- End ----------------------------------------------------

转载请注明：Axure原创教程网 » AxureRP8实战手册-案例8（形状：制作环形进度条）

小楼老师倾力打造AxureRP7.0精品课程系列，独特的技术，淫荡的思路，销魂的声音，丰富的姿势，润滑的体验，超爽的感觉，想要？就从下面进入！

《AxureRP7.0从入门到精通》------从零向高手蜕变的必修课------<<想上它，插这里！>>