如何用Axure制作匀速环形进度条？

　　在各类产品中，关于进度条的展现方式各异，而笔者选择了常见的匀速环形进度条，向我们展示了用Axure制作的要点与逻辑。
　　01最终效果
　　元件加载环形（圆形）进度条自动增长（匀速）
　　百分比数值跟随变化
　　进度条增长到一定长度停止增长（百分比跟随停止）
　　02注意事项
　　本教程用Axure9作为教程说明工具（Axure8可适用）
　　本教程对于Axure基本操作不做赘述
　　03制作难点
　　实现思路的逻辑（循环事件的应用）
　　全局变量与交互事件的应用
　　04元件准备
　　图中带有闪电标识表示有创建交互事件的元件：
　　05交互逻辑思路
　　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，用的时间为400010040毫秒。
　　经实际测试，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。2180169。2度。
　　4000毫秒对应圆环100，97圆环对应3880毫秒。右侧半圆全部走完需要2000毫秒，388020001880毫秒。
　　详解右侧动态面板在转动半圆中的结构：
　　分解后的动态图：