Axure RP (四十)案例 - 环形进度条

    技术2025-08-13  31

    制作上半圆:拖一个矩形,转变形状将底部边框去掉,设置宽120高60,设置圆角半径和高度一样60,设置边框为最粗,设置边框颜色为绿色,命名为“上半圆”。在页面载入时或者元件载入时添加旋转事件, 相对位置、旋转180°、方向为顺时针、锚点为底部、旋转事件5000毫秒。

    3. 添加一个矩形1并命名为遮挡,宽度和高度和上半月的宽高完全一样,设置矩形无边框,无边矩形的坐标值和上半圆的坐标值完全一样,达到完全遮挡住上半圆的效果。 添加完遮挡后再次预览,可以看到上半圆旋转看起来是慢慢旋转的效果,逐渐出现的效果。

    复制上半圆并命名为下半圆,复制后也把事件复制过来了,这里不需要原来的事件所以要删除原来的载入时事件,然后将上半圆旋转180度形成下半圆,修改下半圆的横坐标和上半圆的横坐标一致,纵坐标为上半圆的纵坐标+上半圆的高度,这样会将下半圆和上半圆合成一个完整的圆。

    默认下半圆为隐藏状态。

    修改上半圆载入时事件,增加一个等待时间等待时间和上半圆旋转时间保持一致。

    修改上半圆载入时事件,等待时间完成后设置遮挡隐藏。

    为遮挡添加隐藏时事件,显示下半圆,并让下半圆继续接着上半圆旋转,同样顺时针旋转180°、动画为线性、旋转时间为5000毫秒。

    在圆心位置增加一个动态面板命名为事件循环,并设置自动调整为内容尺寸,新增一个状态,总共两个状态,两个状态中都不需要填充任何内容。

    拖动一个文本标签命名为进度,设置字号32,字体颜色为绿色,放在圆心。

    页面或者上半圆元件载入时轮询切换动态面板状态。注意要放在第一个动作,不能放在等待动作后,首个状态不需要延时1000毫秒。

    设置全局变量, 用于记记录进度条的进度,默认为0。

    为动态面板添加状态改变时事件,面板状态改变时修改进度文本值。

    进度超过100就不需要再修改文本值了,所以要增加条件判断。

    Processed: 0.011, SQL: 9