Axure正版代理
北京口耳相传科技有限公司旗下网站

Axure元件库下载

老案例新做:显示进度的横向滑块

axure培训

写在前面:本站以前有很多案例教程,随着axure软件的升级,可能有些地方已经不正确了。随着时间推移,可能有些案例的下载地址也失效了。所以黄老师近期会推出一个系列教程,就是把以前的案例用最新的axure8.0重新做一遍。

梦儿以前给大家分享了一个显示进度的滑动块案例,里面一堆函数和公式,对于新手来说很晕。黄老师给大家做了一个简单的,便于新手理解。思路和原文是一样一样的。

下载地址:点击下载>> 预览地址:http://ybt2uz.axshare.cn/#g=1&p=index

构成元件就三个。

1、一个背景(矩形,宽600,高30,圆角半径15)命名为beijing.

2、一个进度条(复制背景,设置背景颜色为蓝色,宽度设置为30)命名为jindu。

3、一个圆形。将圆形转换成动态面板。命名为yuanxing.

黄老师的命名规则就是这么简单粗暴。

为了方便理解,进度条是靠着Y轴的,这样可以少考虑一个参数。

拖动圆形(动态面板)的时候,添加三个交互:

1、移动当前元件,水平拖动。设置拖动边界,左侧大于等于0,右侧小于等于背景的长度。

这一步是让这个圆圈在背景条上可以拖动起来。

2、设置进度条的尺寸,宽度为:[[yuanquan.x+yuanquan.width]],注意要添加局部变量yuanquan指的是动态面板圆圈。锚点在左侧。

这一步是让进度条跟着动起来。

3.设置圆形上的元件文字=[[Math.floor((jindu.width-30)*100/570)]],注意添加局部变量。

这个是设置圆形上的文字。公式计算的是当前位置的百分比。由于本身有30宽,所以计算百分比的时候分子分母都需要减去30。不然就不是从零开始的了。Math.floor()是向下取整,也就是把小数点后面的数字抹掉,不然算出来会有长尾巴。

这样就做完了,新手要注意一下三个元件的层级顺序,圆圈在最上面,进度在中间,背景在最底下。在概要面板里面可以拖动调整元件的层级。

转载请注明出处:Axure中文网 » 老案例新做:显示进度的横向滑块

评论 16

评论前必须登录!

 

  1. #10

    命名有问题,开始说是yuanxing后面写变量就变成yuanquan,我弄了好久才发现是这个错误。做的同学注意下!

    淘淘2周前 (05-14)
  2. #9

    这是我迄今为止看到的最模糊的案例,步骤不全,一张图没有,别说新手了,我觉得老人都不能能按照你这个步骤做出来

    罗康2个月前 (03-14)
  3. #8

    原型下载连接失效了

    胡志威7个月前 (10-25)
  4. #7

    进度显示在进度条的中间,有时圆形会挡住

    Moona8个月前 (10-12)
  5. #6

    为什么最上面那个原型拖动时不见了,只剩下进度和背景

    38个月前 (09-30)
  6. #5

    还是不会啊,第二部圆圈的局部变量该设置什么?

    Rafe Wong10个月前 (07-21)
    • 设置完移动的交互动作后,在用例编辑面板的左侧新增一个“设置尺寸”的动作。在右侧配置动里面选取进度条,点击下面宽度值右侧Fx后,新建一个局部变量yuanquan=元件 圆形。这样yuanquan这个变量就可以被参照了,那么进度条的宽度就是yuanquan里的两个值的和:X轴的值和宽度值即[[yuanquan.x+yuanquan.widyh]],把这个值填入进度条的宽度值里面即刻。

      Mha8个月前 (09-28)
  7. #4

    为什么进度条拖长了不是圆头矩形,而是很长的椭圆?

    vvvvvvvv11个月前 (07-14)
    • 我也是呢,下载了原型比对没发现什么问题,而且下载的原型直接预览没问题,复制到我的原型里面,预览又变成扁圆的了

      BossaNova10个月前 (08-02)
      • 我在Mac和Windows上各做了一遍,Windows上做的没有问题,不会变成椭圆,Mac上做的就会。

        Zoe9个月前 (08-30)
      • 是不是变成两头尖的了。。。

        qquser5个月前 (12-27)
  8. #3

    搞定了,哈哈哈

    axure00012个月前 (06-03)
    • 怎么添加局部变量啊???

      黔_哟9个月前 (08-28)
      • 设置完移动的交互动作后,在用例编辑面板的左侧新增一个“设置尺寸”的动作。在右侧配置动里面选取进度条,点击下面宽度值右侧Fx后,新建一个局部变量yuanquan=元件 圆形。这样yuanquan这个变量就可以被参照了,那么进度条的宽度就是yuanquan里的两个值的和:X轴的值和宽度值即[[yuanquan.x+yuanquan.widyh]],把这个值填入进度条的宽度值里面即刻。

        Mha8个月前 (09-28)
  9. #2

    多加入一些新的案例

    石赛帅1年前 (2017-05-25)
  10. #1

    添加交互那里在Axure里具体怎么操作?

    mart_771年前 (2017-05-11)

购买Axure RP正版授权 终身可用

购买专业版购买团队版