利用动态面板实现环形进度条加载 获赏10金币 基础教程

lsyjohn 普通用户 2020-2-15 1593

先来看下效果。

基本原理

上面是组合效果,主要包含三个部分,左半圆、右半圆和中间的百分加载部分。左、右半圆的实现原理很简单,就是利用动态面板的遮挡功能,将一个完整的圆遮挡一半,然后在显示的那一半上面添加一个不透明的矩形框,然后旋转矩形框,将下面的圆显露出来,同时矩形框逐渐进入动态面板被遮挡的区域,从而逐渐消失,在下图中把矩形框设置成了半透明的浅色,我们可以很清楚的明白其原理。

中间的百分加载部分就是利用动态面板制作的定时器,定时改变元件中的文字实现的,关于动态面板定时器的基本设置,可以参见https://www.pmyes.com/thread-35463.htm

下面是具体的实现步骤:

1、拖入一个动态面板,将尺寸设置为宽100,高200(按需调整,刚好是正方形的一半),并命名为左半圆。然后在面板中添加两个圆,一个200x200的底圆,设置背景色并去掉边框,一个白色的内圆,去掉边框(当然,样式可以自定义),将两个圆组合在一起,然后将左边与动态面板的左边沿对齐。完成编辑后就可以得到下面右图所示的半圆。

                

2、再次打开左半圆,在显示区添加一个220x110的矩形框,尺寸比面板尺寸稍大即可,这样可以保证后面旋转过程中能完全遮挡住底部的圆。去掉边框,将矩形框右边沿与动态面板的右边沿对齐,上下居中对齐。完成后得到下图所示的左半圆,此时看不到底部的圆。

                

3、复制左半圆,命名为右半圆,将上面的左边沿对齐改为右边沿对齐,得到右半圆,拖动元件,将左半圆和右半圆拼接在一起。

4、点击右半圆,为里面的矩形框添加交互动作,选择载入时(也可选择其它触发事件),执行旋转动作,分别设置旋转角度、执行事件、动画和旋转中点,旋转中点为左边的中点。这样可以完成右半圆的动画。

5、左半圆要等到右半圆动画执行完毕后再执行,因此我们要添加2000ms的等待时间,然后再将左半圆中的矩形框进行旋转,设置和右半圆一样,只是旋转中点改为右边中点。

6、最后添加进度指示文字,拖入一个200x200的矩形框,底色设置为透明色,去掉边框,初始文字为0%。

7、为了动态改变文字,我们要加入一个动态面板做的定时器。状态改变时设置进度的文本。由于文本中含有“%”符号,因此不能直接做数学运算,我们通过slice函数将%以前的字符串截取出来,然后再加1,再与%组合。当文本变为100%时,应停止改变文本,因此增加了情形1,当进度的文本不等于100%的时候才执行设置文本的动作。

8、最后我们要在右半圆的矩形载入中设置定时器的面板状态,循环间隔为40ms(完整的加载事件为4000ms,除以100)。

通过以上步骤即可完成环形进度的制作,我们可以将载入时触发改为通过按钮触发。也可以控制左半圆中矩形旋转的角度实现非百分百的加载。

https://www.axureshop.com/shop/24308中有一些综合实战案例,欢迎大家下载交流学习。

axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (39)
  • 爱丽丝 普通用户 23天前
    0 引用 40
    感谢分享
  • qzl123 普通用户 26天前
    0 引用 39
    感谢分享
  • 溪风丨微雨轻尘 普通用户 26天前
    0 引用 38
    感谢分享
  • atomcow 普通用户 5月前
    0 引用 37
    瞅瞅
  • lxy1120 普通用户 6月前
    0 引用 36
    感谢感谢
  • 飞奔的母猪 普通用户 6月前
    0 引用 35
    感谢分享
  • 宋国骄 普通用户 6月前
    0 引用 34
    谢谢
  • lsyjohn 普通用户 7月前
    0 引用 33
    line_1598513709 怎么获得金币奖励?
    发教程,或者直接充值
  • line_1598513709 普通用户 7月前
    0 引用 32
    怎么获得金币奖励?
  • antante 普通用户 7月前
    0 引用 31
    感谢分享!
  • 娜小娜 普通用户 7月前
    0 引用 30
    感谢分享
  • ECHO_HE 普通用户 7月前
    0 引用 29
    感谢
  • Lsl 普通用户 7月前
    0 引用 28
    666
  • 123456ZZZ 普通用户 8月前
    0 引用 27
    666
  • An_lin玲儿 普通用户 9月前
    0 引用 26
    学习一下哦,感谢分享
  • meihao 普通用户 9月前
    0 引用 25
    感谢分享 
  • 18680734145 普通用户 10月前
    0 引用 24
    66
  • Meeko 普通用户 10月前
    0 引用 23
    thanks
  • 性格决定命运(陈丰) 普通用户 11月前
    0 引用 22
    666
  • 张一 普通用户 11月前
    0 引用 21
    感谢分享
  • 纳洛酮。 普通用户 11月前
    0 引用 20
    66
  • ECHO_HE 普通用户 11月前
    0 引用 19
    感谢分享
  • lsyjohn 普通用户 11月前
    0 引用 18
    哈迪斯00 我按这个方式设置怎么数字到1%就不变了?是变量设置错了吗?但是我直接复制的你的变量还是不行
    可以加我QQ,发你的rp文件我看下吗
  • 哈迪斯00 普通用户 11月前
    0 引用 17
    我按这个方式设置怎么数字到1%就不变了?是变量设置错了吗?但是我直接复制的你的变量还是不行
  • 哈迪斯00 普通用户 11月前
    0 引用 16
    3q
  • babybear619 普通用户 11月前
    0 引用 15
    感谢分享
  • GoliatZ 普通用户 11月前
    0 引用 14
    感谢分享
  • lemon_1583160942 普通用户 11月前
    0 引用 13
    感谢分享!
  • 羽栖萧云 普通用户 11月前
    0 引用 12
    感谢感谢
  • 悟一 普通用户 11月前
    0 引用 11
    感谢分享
  • 。_1587429836 普通用户 11月前
    0 引用 10
    谢谢
  • 爱看星星的周宇宙 普通用户 11月前
    0 引用 9
    谢谢
  • 单单 普通用户 2020-3-20
    0 引用 8
    谢谢
  • Allen李 普通用户 2020-3-12
    0 引用 7
    感谢
  • 程维维 普通用户 2020-3-12
    0 引用 6
    感谢分享
  • 真以航(熊岳南京) 普通用户 2020-3-10
    0 引用 5
    感谢分享
  • 小草莓 普通用户 2020-2-29
    0 引用 4
    学习
  • Wujungang 普通用户 2020-2-18
    0 引用 3
    学习
  • 沈十三 管理员 2020-2-15
    0 引用 2
    感谢分享,已获得10金币奖励!
返回
axure商城