小编点评

**步骤一：拖拉布局** * 创建一个容器，并将其分成上下两个区域。 * 在上下区域中分别创建一个 160x80 的圆形元素来构建两个圆形。 * 在上下区域的中间添加一个文本标签，文字为“100%”。 * 设置上下左右居中，命名为“进度”。 **步骤二：添加页面载入时用例** * 在页面加载完成时，触发“进度”的显示。 **步骤三：对“进度”进行动画** * 旋转“上灰”180度，错点为底部。 * 使用线性动画，让“下灰”从底部逐渐上升到顶层。 * 设置动画持续时间为 3600毫秒。 **步骤四：设置显示时用例** * 设置“进度”的文字为 `ceil((“上灰”的角度 + “下灰”的角度 - 180) / 3.6)`。 * 等待 0毫秒。 * 隐藏“进度”元素。

正文

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

1、4个半圆环，一个白色上半圆环 (上白)，一个白色下半圆环 (下白)，一个灰色上半圆环 (上灰)，一个灰色下半圆环 (下灰)，排放层次为: 下灰<下白<上灰<上白 (小技巧:无底边矩形与圆形进行去除操作可得半环形)
2、上面盖两个圆形，大的为透明底黑框，小的为白底黑框;
3、中间一个文本标签，文字为“100%”，设置为上下左右居中，命名为“进度”

画一个矩形 W：160、H：80
画一个圆型 W：140、H：140
选中两形状 => 去除

复制三份，分别命名为 上白、上灰、下白、下灰（旋转 180度）

注意排放顺序：上白、上灰、下白、下灰

上面盖两个圆形，大的为透明底黑框 160106，小的为白底黑框 140140

文字为“100%”，设置为上下左右居中，命名为“进度”

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

1、触发“进度”的显示时用例;
2、相对顺时针旋转“上灰”180度，错点为底部，动画为线性，时间为3600毫秒:
3、等待3600毫秒:
4、将“下灰”至于顶层
5、相对顺时针旋转“下灰”180度，锚点为底部，动画为线性，时间为3600毫秒

此时，外环已经有进度条的效果了

步骤三:为“进度”添加显示时用例

1、设置“进度”的文字为ceil ( (“上灰”的角度+“下灰”的角度-180) /3.6);
2、等待0毫秒;
3、隐藏“进度”
4、显示“进度”