目的

做一个圆形进度条，能够根据进度百分比，自动设定圆形进度条长度。

效果图

方法

1. 使用大圆形填充背景和小圆形数值前景叠加的方式实现环形进度条。

背景	前景	叠加后

2. 使用两个半圆作为进度条遮挡物

左半圆	右半圆	拼接后

3. 使用一个文本标签存储当前进度值（不带百分号），将其设为不可见。组合后的层级如下：

说明：

• 左右半圆用动态面板包裹，半圆在旋转时超过动态面板边界的部分将不展示。

需要取消动态面板的适应内容选项。

右半圆同样的设置：

4. 使用触发操作，在【进度值-隐藏】标签设定交互内容：

说明：

1. 给前景设定带%的进度值。

2. 当进度值≤50时，旋转右侧半圆，需要换算度数和进度的关系。

[[(This.text*180/50).toFixed(0)]]

• 使用This.text获取进度值（不带百分号）。
• 使用toFixed(0)精确到整数位。

• 顺时针旋转
• 旋转by
• 偏移和锚点选择左边中间点。

3. 当进度值落于50-100时。先隐藏右半圆，开始旋转左半圆。

设定旋转公式：

[[((This.text-50)*180/50).toFixed(0)]]

• 旋转的角度为【当前值-50】，即只计算超过50的部分。

左半圆的锚点设定为右侧中间。

4. 设定完成，进行调试。
5. 拓展应用，用于中继器，绑定中继器的值，实现展示不同进度。

附件