今天教大家制作环形进度条（开始暂停效果）的原型模版，效果包括：

• 点击开始按钮，可以环形进度条开始读取，中部百分比显示环形的读取进度；

• 在读取过程中，点击暂停按钮，可以随时暂停，再次点击开始按钮后继续读取；

• 读取完成后，点击重新开始按钮，可以从0开始读取；

具体效果可以打开下方原型地址体验

【原型效果】

【原型预览含下载地址】

https://axhub.im/ax9/0bdf7f8cc3fccbc4/#g=1&p=环形进度条（开始暂停效果含百分比数字）

【制作教程】

1、材料准备

主要材料包括圆环，半圆（左半圆和右半圆），按钮和文本标签，如下图所示

圆环我们可以通过一个大圆和一个小圆，通过布尔运算的相减得到；

两个半圆可以通过一个圆和一个矩形，通过布尔运算的相减得到，完成后鼠标右键将他们分别转为动态面板，面板取消勾选适应内容；

按钮我们要设置一个选中样式，就是暂停时的样式，案例中为橙色；

制作好之后如下图所示摆放：

2、交互制作

2.1进度条自动读取效果

进度条读取的主要原理，是通过旋转左右两个半圆，例如进度为25%时，应该显示四分之一个圆，这里相当于把，右侧半圆旋转90度，因为动态面板可以遮挡超出面板尺寸的内容，所以显示就会如下图

如果进度是75%，相当于旋转的是270度，相当于将右侧半圆旋转180度，左侧半圆旋转90度

第一种情况是读取时，如果右侧半圆旋转的角度小于180度，我们就用旋转的交互，旋转右侧半圆1度，然后用设置文本的交互，将对应的百分比值设置到数字上，百分比和数字之间的关系为右侧半圆旋转的角度/360°×100%，例如旋转90度就是90/360°×100%=25%。考虑到会有出现除不尽的情况，所以我们可以用tofixed函数控制显示小数点的位数。

第二种情况是读取时，如果右侧半圆旋转的交互，等于180度，这次就应该到左侧半圆开始旋转，所以我们用旋转的交互，旋转左侧版圆1度，然后用设置文本的交互，将对应的百分比值设置到数字上，百分比和数字之间的关系为左侧半圆旋转的角度/360°×100%+50%，这里50%是值右侧半圆转完了，刚好对应一般的数值，例如左侧半圆旋转90度就是90/360°×100%+50%=75%。考虑到会有出现除不尽的情况，所以我们可以用tofixed函数控制显示小数点的位数。

然后我们用等待事件和触发事件来做一个循环，等待的时间决定读取进度条的快慢，案例中是设置为10ms，触发事件触发该交互再次执行。

循环什么时候结束呢，我们先说第一种情况，自动停止的情况，就是左右半圆都旋转了180%，就是转完了，进度到达100%，这时就不用循环了，我们用设置文本的设置按钮的文字为重新开始，取消按钮的选中，就是变回默认的颜色。

上面是第一种结束循环的情况，第二种就是我们点击暂停按钮，手动结束循环的情况。

2.2鼠标单击开始暂停按钮

一开始，鼠标单击按钮时，如果按钮文字是开始，那我们就开始上面的读取交互，并且将按钮文字改成暂停，设置按钮选中为真，这样按钮会变成红色（前面设置的选中样式）。

鼠标单击按钮时，如果按钮文字是暂停，那我们就要停止循环了，所以在读取的交互里，要增加一个条件，就是按钮的值要等于暂停才循环，如果等于开始，就相当于停止读取。所以我们点击按钮，它的文字为暂停时，要用设置文本的交互，将按钮文字改成开始，这样进度就会停止读取，并且用取消选中的交互，取消按钮的选中，这样就会变回默认的颜色，相当于将按钮还原。

再次点击按钮，又会执行上面按钮等于开始的交互，继续读取。

前面在读取的时候有说到，如果左右侧半圆都旋转了180%，就是转完了，进度到达100%，这时就不用循环了，按钮文字会设置为重新开始。

所以这里还有一种情形，就是按钮文字等于重新开始，这里和上面按钮文字为开始的交互基本一样，不同的是，我们要先将左右半圆恢复原状，我们用旋转的交互，将他们旋转到0°就可以了。

其余的就跟开始文字的按钮交互一样，复制粘贴过来就行。

这样我们就完成环形进度条（开始暂停效果）的原型模版了，后续使用也很方便，直接复制粘贴就可以了。

那以上就是本期教程的全部内容，感兴趣的同学们可以动手试试哦，感谢您的阅读，我们下期见。

本文模版和内容由微信公众号：Axure高保真原型原创发布，未经许可，禁止转载和商用