较简单的方法实现环形进度条的加载过程

尹广磊 · 发表于 2016-10-13 16:06:26

演示地址：http://jscwz4.share.hiaxure.com/

相关链接：[动画教学]Axure8.0新增饼图，绘制环形进度条方便

制作原理：

1. 利用面板的遮挡作用，制作出两个半圆的加载后进度条。
2. 再次利用面板的遮挡作用，把制作出的两个半圆，放置在看不到的区域。
3. 通过围绕圆的中心点旋转的方法，将看不到区域的两个半圆逐渐旋转出来。
4. 至此加载动画制作完成，后边制作数字的动态变化。
5. 利用面板的状态切换，制作一个循环，通过循环让数字不断加1.
6. 设置条件，当数字达到100后停止。
7. 由于面板状态切换时间间隔太短，导致数字与进度条的加载不能完全同步。
8. 所以在加载到一半时和终点时，人为修定一下数字，让他们是同步完成的。

fhl · 发表于 2018-1-11 08:50:50

超级赞

王相鲁 · 发表于 2018-9-3 13:51:41

不错，值得学习

haocj · 发表于 2018-10-20 12:35:13

学习了

wzsy · 发表于 2019-3-14 14:52:17

稳稳的

jinyangvvv · 发表于 2019-8-28 09:44:39

:o:o:o牛皮！

[手机端] 较简单的方法实现环形进度条的加载过程

评分