Axure RP 案例(环形进度条)

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

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

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

  2. 默认下半圆为隐藏状态。在这里插入图片描述

  3. 修改上半圆载入时事件,增加一个等待时间等待时间和上半圆旋转时间保持一致。在这里插入图片描述

  4. 修改上半圆载入时事件,等待时间完成后设置遮挡隐藏。在这里插入图片描述

  5. 为遮挡添加隐藏时事件,显示下半圆,并让下半圆继续接着上半圆旋转,同样顺时针旋转180°、动画为线性、旋转时间为5000毫秒。在这里插入图片描述在这里插入图片描述在这里插入图片描述
    在这里插入图片描述

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

  7. 拖动一个文本标签命名为进度,设置字号32,字体颜色为绿色,放在圆心。在这里插入图片描述

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

  9. 设置全局变量, 用于记记录进度条的进度,默认为0。在这里插入图片描述

  10. 为动态面板添加状态改变时事件,面板状态改变时修改进度文本值。
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述

  11. 进度超过100就不需要再修改文本值了,所以要增加条件判断。在这里插入图片描述
    在这里插入图片描述

©️2020 CSDN 皮肤主题: Age of Ai 设计师: meimeiellie 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值