Axure RP 9 教程—记录你的颜值

axure商城

前言

本案例教你记录你的颜值,哈哈,开玩笑啦,言归正传,本案例制作一个可拖动的条形进度条,同时可以显示当前位置的百分比。

实现效果

自由拖动进度条

记录当前进度条的百分比顺便记录下你的颜值

Axure RP 9 教程—记录你的能力值

实现逻辑

this.right函数:当前元件最右侧的横坐标

LVAR.toFixed(decimalPoints)函数:用于选取保留几位小数,LVER为所选值,decimalPoints数字,例如 5.toFixed(2)是指5.00 。

100除以进度条的长度就等于每拖动进度条单位长度时对应的百分比数值。

交互步骤

Step one.

准备素材:需要一个进度条框,一个用户控制显示范围的动态面板,一个进度条,一个用户拖动进度条的动态面板,和一个显示百分比的显示框。如图所示:

Axure RP 9 教程—记录你的能力值

Step two.

进度条长度为475,将进度条转换为动态面板,动态面板取名为进度条,放置在横坐标为-450的位置。

将进度条范围框放置在横坐标为0的位置。

创建动态面板“进度条范围”,将进度条动态面板和进度条显示框都放在动态面板内。(这里注意,需要将进度条范围动态面板取消勾选自适应内容)

将百分比显示框放在合适的位置,隐藏边框线。

ok,准备工作基本完成。

Step three.

下一步,是设置交互,本案例交互非常短。

选中进度条动态面板:

拖动时

设置移动

进度条水平移动

边界Right≤425,Left≥-450

设置文本

百分比显示框为[[((This.right-25)/4).toFixed(0)]] %

OK,完成啦!(解释文本框的函数:意思是将进度条框长度为425,进度条初始位置占去了25,剩下的距离为进度条可移动距离为400,进度条每移动一个单位,那么对应的百分比就是0.25,即1/4,因此(This.right-25)/4就等于进度条当前位置占全部距离的百分比,再利用取小数点后0位,就可以得到当前进度条位置的整数百分比)

最后

最后,大家只要复制刚才做的交互,同时写上对应的能力值,就可以做到本案例的效果啦。依然郑重提醒大家,本教程只能用Axure RP 9 及以上版本打开,坚持使用Axure RP 9的原因很简单,就是想与时俱进,拥抱变化,适应未来。

最后,原型下载链接:下载

关注作者公众号,一起向梦想出发

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

评论:

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

100%好评

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

最新评论

  1. avatar
    黎明那时发布于: 
    评分:

    您好,小白想问一下:如何将进度条动态面板和进度条显示框都放在动态面板内?

    • PM Silence
      PM Silence发布于: 

      动态面板的创建有两种形式,一种是在元件库里直接用,一种是选中想要创建到动态面板的元件,点击右键选择转换为动态面板,只要选中进度条动态面板和进度条显示框,鼠标右键选择转化为动态面板就可以了啊

      • avatar
        黎明那时发布于: 
        评分:

        创建动态面板我是知道的,只是这个操作不懂,不知道怎么控制显示范围:一个用户控制显示范围的动态面板。

        • PM Silence
          PM Silence发布于: 

          动态面板选中后,右侧的属性框里面有个自动调整为内容尺寸,你可以看看

          • avatar
            黎明那时发布于: 
            评分:

            我终于会了,我的天,好笨。我以为是把动态面板拖出来放在一起就行了,原来是双击动态面板之后,再添加元件进去。

        • PM Silence
          PM Silence发布于: 

          客气了 客气了 你可以关注我公众号 有问题随时沟通哈 一起学习嘛

  2. avatar
    黎明那时发布于: 
    评分:

    文中纠错:

    LVAR.toFixed(decimalPoints)函数。
    LVER为所选函数。

    到底是LVAR,还是LVER?

发表评论