使用矩形元件进行变形，变化为一个半圆：

具体方式详见图片1，然后设置其大小100、50； 圆角50，边框最粗，颜色：绿色，效果如下图：

画出一个半圆？有了半圆然后在旋转，是不是有了进度条的基础。

对半圆进行命名：半圆A,然后设置页面载入时交互用例，

一定按照下图设置：旋转（经过），角度（180），方向（顺时针），锚点（底部），动画（线性），时间（5000ms）

第二部完成后，我们可以预览一下，是不是我们要的效果，为了更加形象，我们拉出一个矩形（设置底部对齐，命名为：矩形），查看效果：

根据前三步，我们完成了一个圆形进度条的核心部分，下面我们来继续制作：

将半圆A复制一个，并命名为：半圆B,位置按照下图所示：让两个半圆刚好组合为一个圆（便于效果演示）

设置：遮挡与半圆A,底部对齐，遮挡：无边框

设置：半圆B 隐藏

设置交互示例：

点击：半圆A，添加：等待事件，设置等待时间为5000ms,然后添加显示/隐藏事件：隐藏遮挡

这样当半圆A旋转完成时，我们让遮挡隐藏，让半圆B显示，且开始旋转，就可以接着A的旋转继续.

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

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

对矩形进行变形为半圆

如果对你有帮助，记得投票哦