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

小楼一夜听春语 · 发表于 2013-7-25 11:33:22

作者: 小楼一夜听春语
之前的教程《小楼axure教程（五）动态面板的使用》讲到了动态面板的用途，正好我又看到有些网友在问在axure里进度条的效果怎么实现，那么这一次axure rp教程就结合进度条的效果，讲一下动态面板的多状态的使用。
原型示例：小楼axure rp教程（六）动态面板多状态实现进度条
效果如下：

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

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

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

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

lvhongfei2013 · 发表于 2013-8-2 10:50:37

看了你的，根据你的方法，我自己也做了一个，但是总感觉哪里不对，指导下。

小楼一夜听春语 · 发表于 2013-8-2 22:17:56

用面板切换就别用面板移动任何一种都能实现一起就有问题了

cmmsjfortms2009 · 发表于 2014-3-14 20:04:08

我自己也设计了一个，终于学会了，半天时间啊，不容易啊，希望大家点评。

MissShirley · 发表于 2014-5-8 15:26:16

学会了，自己做了一下，受教啦！！:victory:

zqc1985 · 发表于 2014-6-9 15:13:45

我也做了一个为啥进度条变了，但不显示百分比的变化呢？

大米爱老鼠 · 发表于 2015-4-22 14:59:48

我做的百分比也没变化:dizzy: