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

AxureRP6.5教程 小楼一夜听春语 14994℃ 0评论

之前的教程《小楼axure教程(五)动态面板的使用》讲到了动态面板的用途,正好我又看到有些网友在问在axure里进度条的效果怎么实现,那么这一次axure rp教程就结合进度条的效果,讲一下动态面板的多状态的使用。

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

效果如下:

gaollg0

首先,我们准备axure元件,一个动态面板和一个按钮。

然后,为动态面板添加几个状态,这里添加5个来举例。

1

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

2

3

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

4

好了全部做完后我们就能够生成原型查看效果了。

扩展:既然能够做进度条的前进效果,那么再添加一个按钮,按钮事件把动态面板的状态切换反过来排列,就能实现进度条回滚的效果了。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 小楼axure rp教程(六)动态面板多状态实现进度条

喜欢 (2)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 原形文件链接失效了
    瑜宇2016-12-08 11:13 回复