如何用Axure制作匀速环形(圆形)进度条

最终效果

1、元件加载环形（圆形）进度条自动增长（匀速）
2、百分比数值跟随变化
3、进度条增长到一定长度停止增长（百分比跟随停止）

注意事项

1、本教程用Axure9作为教程说明工具（Axure8可适用）
2、本教程对于Axure基本操作不做赘述

制作难点

1、实现思路的逻辑（循环事件的应用）
2、全局变量与交互事件的应用

元件准备

图中带有闪电标识表示有创建交互事件的元件

交互逻辑思路

1、元件载入（2号元件）设置文本框（5号元件）的文本为 0
说明a：文本框（5号元件）文本默认文本不为0，此时设置为0，即改变了文本框（5号元件）的文本
说明b：当文本框（5号元件）文本改变时，同时执行百分比文本标签（6号元件）百分比数值匀速增长和环形（圆形）进度条同速度匀速增长。
2、怎么实现百分比文本标签（6号元件）百分比数值匀速增加？
文本框（5号元件）设置如果全局变量的值小于97
那么执行等待37毫秒
设置全局变量的数值加1（全局变量初始值为0）
设置百分比的数值部分为全局变量的数值
设置文本框（5号元件）的文本为全局变量
说明a：等待37毫秒的37毫秒怎么来的？
设计环形（圆形）进度条如果自增长至圆环的时间为4000毫秒，对应百分比数值为100%，那么百分比数值增加1%，用的时间为4000/100=40毫秒。
经实际测试，40毫秒调整为37毫秒，百分比数值增长与环形（圆形）进度条增长速度一致。（为什么，作者也没搞明白，有知道的告诉我）
说明b：百分比增长是什么原理实现的？
文本框（5号元件）文本改变时就设置全局变量加1，紧接着设置新的全局变量给文本框（5号元件），从而导致文本框（5号元件）文本改变时，从而又执行一次此事件，形成循环事件。
3、怎么实现环形（圆形）进度条的自增长？
紧接着步骤1，元件载入（2号元件）设置文本框（5号元件）的文本为0,
旋转右侧半圆180度，匀速用时2000毫秒
等待2000毫秒旋转左侧半圆169.2度，用时1880毫秒
说明a：旋转左侧半圆为什么169.2度，用时1880毫秒？
最终效果需要在百分比97%已经对应环形（圆形）进度条97%的位置停止自增长。
360度对应圆环100%，97%圆环对应349.2度，右侧半圆全部走完180度，左侧半圆剩下349.2-180=169.2度。
4000毫秒对应圆环100%，97%圆环对应3880毫秒。右侧半圆全部走完需要2000毫秒，3880-2000=1880毫秒。