Axure8制作环形进度条

Axure8制作环形进度条

参考链接：/ma/s/m9GpqH34

1.元件制作

（1） 拖入1个圆形控件，设置边框色，背景色都为青绿色。

（2）拖入一个小圆形控件，设置边框色，背景色都为白色，与大圆圆心重合。

​ （3）裁剪获得空心圆。同时选中大圆小圆右键

（4）裁剪获得半空心圆，拖进来一个矩形，压住一半空心圆，同时选中右键。

（5）获得半空心圆后，复制一个，然后右键->改变形状->水平翻转，得到另半边空心圆。

2.元件及元件摆放说明

（1） 通过裁剪获得制作所需部件，将四个部件分别取名为左上环（白），左下环（青绿），右上环（白），右下环（青绿色)，并按照右下环（青绿色），右上环（白），左下环（青绿色），左上环（白）的由下向上顺序放置层级，中心圆置于顶层，一定要注意放置层次，否则就会出错。

​ 然后摆放成环形进度条状态:

3.思路

（1）根据四个半圆环拜访层级，左下环（青绿色）以右边为中心顺时针旋转180度，此时左下环旋转到右上环之上，显示半个青绿色环。

（2）此时设置右下环（青绿色）到最上层，右半边仍然是蓝色的（注意设置时间必须等左下环完全旋转180度后设置）。

（3）右下环（蓝色）以左边为中心完成顺时针180度旋转。

4.操作实现

​ 添加开始按钮。

​ 选中开始按钮设置以下操作，操作为鼠标单击时事件。

​ （1）左下环以右边为中心旋转180度，6秒钟，摇摆。

​ （2）等待6秒（原因：因为左下环旋转设置的6秒，所以要6秒后右下环再设置到最上层）。

​ （3）将右下环设置到最上层。

​ （4）右下环以左边为中心旋转180度，6秒钟，摇摆。

鼠标双击鼠标单击时出现下面界面。

​ 旋转特效完成，添加百分比。

​ （1）设置文本标签，起始值0%。然后设置为隐藏。

​ （2）重新选中开始按钮，鼠标单击时，给开始按钮设置一个显示事件，及显示文本标签。显示一定要放在最上面。

​ （3）然后选中文本标签，设置显示时事件（如果没有，在更多事件里面添加）。

然后鼠标双击显示时出现下面界面。

​ （1）等待

​ （2）设置文本

​ （3）隐藏

​ （4）显示

设置文本值fx里面设置为：

​ （1）添加两个变量。

​ （2）设置变量为

[ [ m a t h . f l o o r ( 100 ∗ ( L V A R 1. r o t a t i o n + L V A R 2. r o t a t i o n ) / 360 ) ] ] [[math.floor(100*(LVAR1.rotation+LVAR2.rotation)/360)]]% [[math.floor(100∗(LVAR1.rotation+LVAR2.rotation)/360)]]

公式意思就左右半圆环旋转角度之和除以360度。

设置完成后点击确定。

​ 显示百分比完成。

5.操作完成，效果如下。

视频演示地址：https://b23.tv/RBtSel