Axure中文社区

WebPPD产品原型设计

 找回密码
 新用户注册
查看: 1476|回复: 0

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

[复制链接]

206

主题

6278

帖子

3万

积分

管理员

创始人

Rank: 9Rank: 9Rank: 9

积分
33697

实名认证

QQ
发表于 2016-10-13 16:06:26 | 显示全部楼层 |阅读模式
UI图书
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, 下载次数: 3

售价(充值): 60 虚拟币  [记录]

评分

1

查看全部评分

您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

QQ|手机版|版权|关于|WebPPD ( 京ICP备09037244号 )

GMT+8, 2017-7-28 08:37

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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