Axure基础详解九：进度条

说明

在界面中，用户在等待的时候总是容易产生一种焦急的心态，所以为了能给用户带来更好的产品体验，进度条能够转移用户的注意力，并且向用户提供事情进展的信息，让用户的等待有了盼头，从而改变了用户等待时的心态。

---

条形进度条

演示

---

制作过程

步骤1：创建控件

• 创建一个400X20的矩形框，充当进度条的外框。
• 创建一个1X20的灰色填充矩形条，充当加载进度条。
• 一个文本标签。

步骤2：设置变量

• 创建一个变量【long】值为0.

步骤3：载入时设置进度条的交互

• 用例：当变量【long】大于等于0和小于400时。
• 设置变量值【long】等于【long+1】
• 设置大小长度等于【long】时间12毫秒
• 等待0秒（也可以不加，但建议加）
• 触发事件

步骤4：载入时设置文本标签的交互

• 设置文本标签文本值为[[math.floor(“进度条的宽度/400*100”]]%（floor()函数表示取整数）
• 等待0秒（也可以不加，但建议加）
• 触发事件

---

环形进度条

演示

制作过程

步骤	说明	图例
创建组件	1、创建四个半圆环，分别为上白、上灰、下白、下灰
	2、图层顺序：上白>上灰>下白>下灰
	3、组合一起：将组件组合在一起，并剧中对齐，上方放上标签文字用来表示加载进度（默认隐藏）。
设置交互	页面加载时： 1、显示标签文字 2、相对顺时针旋转“上灰”180度，锚点为底部，动画为线性，时间为3500毫秒 3、等待3600毫秒 4、将“下灰”至于顶层 5、相对顺时针旋转“下灰”180度，锚点为底部，动画为线性，时间为3600毫秒
	标签文字显示时： 1、设置标签文字为ceil ( (“上灰”的角度+“下灰”的角度-180) /3.6)%（ceil()函数：向上取整） 2、等待0毫秒 3、隐藏“标签文字” 4、显示“标签文字”