查看: 4687|回复: 0

3:子非鱼系列案例图文教程之【进度条】

[复制链接]

0

主题

7

回帖

316

积分

版主

产品经理

Rank: 7Rank: 7Rank: 7

积分
316
发表于 2014-7-16 10:37:22 | 显示全部楼层 |阅读模式
尹广磊公众帐号
02.jpg

实现效果:点击"加载"按钮开始动作,进度条动态滚动。加载完毕后显示完成。

【第一步】绘制界面:
     1、插入活动面板,设置其高度、宽度。
     2、在活动面板中插入背景矩形框。
     3、增加“加载”的按钮。
1.jpg


【第二步】增加遮罩条(进度条)
     1、在活动面板中再次插入与背景矩形大小相当的矩形,设置其背景颜色。用以当作进度条显示使用。
     2、设置遮罩条的X坐标绝对位置。将X坐标设置成负的W值。也就是说宽度往左移动一个身位。使其不显示,但又刚好在背景条的左边。
2.jpg


【第三步】增加进度条加载的各步骤提示
    新建一个活动面板,添加三层,第一层为“点击按钮进行加载”(默认显示),第二层为“加载中...”,第三层为“加载完毕”。
3.jpg


【第四步】添加“加载”按钮事件
    1、在加载按钮触发时显示活动面板为第二层“加载中...”。
    2、设置遮罩条往右水平移动。
    3、在遮罩条移动完毕后显示活动面板为第三层“完载完毕”。
4.jpg

5.jpg


【第五步】加载完毕,演示效果
加载前
01.jpg
加载中
02.jpg
加载结束
03.jpg


总结:
   本案例采用两个矩形利用面板显示区域的绝对位置布局,然后进行矩形移动,进行遮罩另一个矩形。达到滚动条效果。

案例源文件: 子非鱼系列案例图文教程之【进度条】.rar (16.26 KB, 下载次数: 13)
您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

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

GMT+8, 2024-5-3 09:29

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

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