查看: 1210|回复: 0
打印 上一主题 下一主题

小楼axure rp教程(六)动态面板多状态实现进度条

[复制链接]

1313

主题

1337

帖子

5648

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5648
跳转到指定楼层
楼主
发表于 2014-8-26 05:40:27 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
[/url]

小楼axure rp教程(六)动态面板多状态实现进度条


作者: 小楼一夜听春语
之前的教程《[url=http://www.soger.net/93.html]小楼axure教程(五)动态面板的使用》讲到了动态面板的用途,正好我又看到有些网友在问在Axure里进度条的效果怎么实现,那么这一次Axure RP教程就结合进度条的效果,讲一下动态面板的多状态的使用。
原型示例:小楼axure rp教程(六)动态面板多状态实现进度条
效果如下:

首先,我们准备axure元件,一个动态面板和一个按钮。
然后,为动态面板添加几个状态,这里添加5个来举例。

好了,下一步是在动态面板的几个状态里都放上两个矩形和一个文本面板,一个做进度条外框,一个做进度条,文本面板做百分比。我们可以先双击状态1,打开后在里面做好这三个元件的组合,然后再复制到其他状态里做进度条和百分比的简单调整就好了。


如上图,我们做好了5个动态面板状态元件的搭配,下一步就可以给按钮添加点击事件了。事件的过程就是每隔500毫秒,切换动态面板为下一个状态,形成视觉上进度条在增加的效果。具体时间如下图所示。

好了全部做完后我们就能够生成原型查看效果了。
扩展:既然能够做进度条的前进效果,那么再添加一个按钮,按钮事件把动态面板的状态切换反过来排列,就能实现进度条回滚的效果了。
本文出自 诉客 ▪ 产品经理的心声,转载时请注明出处及相应链接。
本文永久链接: http://www.soger.net/98.html


收藏分享评分

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?马上注册

x
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

毒镜头:老镜头、摄影器材资料库、老镜头样片、摄影
爱评测 aipingce.com  
快速回复 返回顶部 返回列表