Axure中文社区

WebPPD产品原型设计

 找回密码
 新用户注册
查看: 4842|回复: 1

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

[复制链接]

338

主题

6496

帖子

5万

积分

管理员

创始人

Rank: 9Rank: 9Rank: 9

积分
56379

实名认证

QQ
发表于 2016-10-13 16:06:26 | 显示全部楼层 |阅读模式
神奇AR
2016-10-13_16-04-04.jpg

演示地址:http://jscwz4.share.axure.org/

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

制作原理:

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

环形进度条加载过程.rp

68.26 KB, 下载次数: 22

售价(获得虚拟币): 60 虚拟币  [记录]

评分

1

查看全部评分

0

主题

24

帖子

117

积分

会员

Rank: 5Rank: 5

积分
117
发表于 2018-1-11 08:50:50 | 显示全部楼层
超级赞
您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

QQ|手机版|友情链接|版权声明|关于我们|Axure中文社区

GMT+8, 2018-7-17 09:47

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表