AXURE-组件-002-WATERLINE

hi，大家好，我是18岁fantasy，本期小组件为一个水位线(用量)显示组件，效果如下：

水位线效果

实现方式

1.图层顺序分析。从底层到顶层组件分解如下图：

组件分解 组件层级显示

（关键在于水位线矩形的填充色要和背景相同）

2.添加事件。为水位线和文字组件分别添加事件（载入时触发），其中水位线高度定时增加，文字定时变大，且事件结束的时间要基本相同，自己可以通过计算控制。具体如下图：

水位线载入时事件 文字载入时时间

这里用到了Math.abs函数将文字的text类型转换为数值类型，以便进行数学计算，当然也可以用变量的方式解决。

以上便是本次小组件的全部内容，喜欢就拿去吧。

原件下载

链接：https://pan.baidu.com/s/1BNG5qNcEuYGBquQ8yIoGWw

提取码：7js3

~~~

18岁提示：以上文件完成于axure 8版本。

点击关注"18岁fantasy"，定期会将组件整理成完整文件统一发布。

原创内容，转载请说明出处。