超级简单的进度条

axure商城

大家好我是Synmo梦儿,我的教程都是使用Axure8制作的,如果我教程中出现了你找不到的选项,那也许就是版本的原因,特此说明。今天教大家做一个效果棒棒哒并且超级简单的进度条,包教包会,学不会我打你,效果如下:

进度条

静态元素构成

  1. 进度条:会增长的矩形条,文中的『bar』指的这个元件;
  2. 进度条边框:套在进度条外面以表达100%进度条长度的矩形,文中的『 max』指的这个元件;
  3. 进度:由进度数字和百分比2个文本构成,文中的『num』指的数字元件。

动态效果分析

  1. 进度条由空涨到满,满时停止;
  2. 数字根据进度条当前进度显示对应百分比。

进度条动态效果制作

首先,进度条初始状态应该是空的,所以应该将进度条宽度改为0,但Axure不能为0,最低为1,所以将宽度改为1。

进度条是出现这个进度条时就开始加载的,所以这个交互要做在『载入时』中。

载入时,我们需要通过『设置尺寸』交互来使进度条的宽度发生改变,由1增至进度条边框的宽度。

p2

锚点选择左侧,因为进度条是由左侧开始展开的。动画选择线性,时间是你期望进度条由空涨到满的时间。

为了避免调整进度条宽度造成的返工,所以我们将进度条边框设置为局部变量,以便获得进度条边框的宽度。

设置的时候记得将max添加到局部变量中,否则是不会生效的。

[[max.width]]的含义是,局部变量中的max所定义的这个元件的宽度。

为了便于大家理解,我将max元件的局部变量名字也设置为了max。

至此,进度条动画完毕了。

数字num百分比动态效果制作

数字需要一直刷新,我们通过不断显示和隐藏文字来实现自循环。

num『加载时』

显示num     //初始时隐藏,加载时显示,然后才能进入显示时的交互。

num『显示时』

设置文本-进度条当前的百分比     //公式=进度条当前宽度÷进度条边框宽度

等待0毫秒     //不加这个的话数字不刷新,不知道为什么,总之加上就对了。

隐藏This

显示This     //显示后就会进入显示时交互,再循环一次此步骤。

百分比显示详解

p3

这时显示的是零点几几的百分比,并且后面精细到了小数点后N位,所以我们需要将它乘以100,并且取整。

[[Math.floor(bar.width/max.width*100)]]

看到很多同学在使用函数的时候会在所有变量外面都加上2层中括号,例[[[[bar.width]]/[[max.width]]]]这样就是错的!实际上是不需要的,在最外层套上双层中括号就可以了。

有些同学也许想说,如果我想显示到小数点后1位的进度怎么办呢?很简单,[[Math.floor(bar.width/max.width*1000)]]/10,先乘以1000,取整后再除10就可以了。

这样显示的数字就是百分比的数字显示,再在公式最后面加一个『%』文本就完成啦。

本文由 Axure中文网 作者:Synmo梦儿 发表,其版权均为 Axure中文网 所有,文章内容系作者个人观点,不代表 Axure中文网 对观点赞同或支持。如需转载,请注明文章来源。
4

评论:

58 条评论,访客:58 条,站长:0 条

0%好评

  • 好评:(0%)
  • 中评:(0%)
  • 差评:(0%)

最新评论

  1. 祥子
    祥子发布于: 

    没做过进度条表示,开头就不知道从哪里开头。

  2. Lemon233
    Lemon233发布于: 

    弄了半天终于实现了,需要注意的是:
    1.num 必须用文本标签 Label;
    2.如果百分比数字不变化,可以在进度条bar载入时加一个状态【num 隐藏】;
    配合num 载入时显示,达到触发刷新数字的目的;
    3.num 显示时(on show),除了设置数值变量外,一定要设置 wait 0ms,hide,show这三个状态,才能持续刷新。

  3. Fanju.
    Fanju.发布于: 

    告诫大家要和其他教程一起看!这个讲得太跳跃了

  4. A.中瓷 秦楚轩 Jerome
    A.中瓷 秦楚轩 Jerome发布于: 

    楼主,您好,为什么我做出来的进度条,有颜色的部分,往左侧推进的,而且右侧有颜色的部分就随着推进而消失了。感觉是反过来了?请教下,谢谢。

  5. 。尔乙 。
    。尔乙 。发布于: 

    讲真我真的没做出来,你来打我吧!!!可不可以加我QQ教我下……605267388

  6. 7_sunshinegirl
    7_sunshinegirl发布于: 

    为什么最后要等待0s后,要先进行隐藏再进行显示数字才会变动,跪求楼主解答!

  7. yyy
    yyy发布于: 

    求问进度条颜色是什么时候设置的,我的效果是进度条到num数字那块的矩形处,不显示颜色,这是为啥呀

  8. 亨利
    亨利发布于: 

    谢谢梦儿,分享我的进度条。进度条url:http://kxyp89.axshare.com/#c=2
    密码:henry1029

  9. 嚥の佐手笾
    嚥の佐手笾发布于: 

    难道是8的原因?

  10. 嚥の佐手笾
    嚥の佐手笾发布于: 

    为什么我无论在进度条填充任何颜色都显示不出来

  11. VVN
    VVN发布于: 

    想请教一下num在最后加载完成时变成10了 而不是100 这个怎么解?

  12. 会飞的猫
    会飞的猫发布于: 

    为什么bar.width=1的时候不会显示进度条动画,只有bar.width>=3的时候才会显示动画,,,,,

  13. daydayup
    daydayup发布于: 

    为什么我的进度条如果按照外框宽度计算的话,进度条走了两个max的宽度呢?

  14. 化身孤岛的鲸
    化身孤岛的鲸发布于: 

    你好,用了你的办法,进度条可以动,但是数字还是不更新啊~求问是什么原因呢?

  15. 这个num是数字元件吗 是从哪里添加呢
    这个num是数字元件吗 是从哪里添加呢发布于: 

    这个num是数字元件吗 是从哪里添加呢

    • Synmo梦儿
      Synmo梦儿发布于: 

      有,点【更多事件】,最下面有,翻译不同,可能是【载入时】。

  16. yanxiang
    yanxiang发布于: 

    估计是因为我用的7.0版本,标签控件没有独立的加载事件,只能通过页面载入处理。
    如果单独处理进度条的任务可以正常完成,加入数字标签后进度条就不动了。不知道是哪里的问题

    • Synmo梦儿
      Synmo梦儿发布于: 

      这个教程就是用7做的, 交互事件里有更多的,显示出来的只是一部分而已,在更多里你就可以看见加载了。

    • henu_09
      henu_09发布于: 

      我刚才也试了一下。数字标签应该转为动态面板,在动态面板“载入时”事件里设置显示,然后在该动态面板里的“显示时”事件设置数字标签文本(百分比),并且自循环。
      如果你是在页面“载入时”事件里加入标签“显示”事件并在标签的“显示时”事件设置了自循环的话,这就是个死循环了。这个时候就不会触发你原来在页面“载入时”里设置的那个进度条填充那个事件了。

  17. gzzzzzzz
    gzzzzzzz发布于: 

    看了半个小时,还是失败了。。我也不知道为什么

      • longzhu
        longzhu发布于: 

        梦老师 请教下为什么我的百分比不更新呢,其他都是正常的

  18. 有课
    有课发布于: 

    太难了,一点都不简单。[泪]

  19. 悟坑
    悟坑发布于: 

    梦梦我来了,支持支持

发表评论