尹广磊 发表于 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牛皮!
页: [1]
查看完整版本: 较简单的方法实现环形进度条的加载过程