「连载100篇」AXURE-组件-020-仪表盘
2019-04-17 本文已影响4人
duomi88
![](https://img.haomeiwen.com/i6332485/d7e4b7cb7c29f263.png)
hi,大家好,我是18岁fantasy,axure组件和实例100篇连载。本期小组件为一个仪表盘动态效果,主要用到axure的移动,随取数(Math.random),小数点处理(toFixed(decimalPoints))等知识点。
其中:
Math.random
随机数函数,返回一个0~1之间的随机数。 示例:获取10-15之间的随机小数,计算公式为Math.random()*5+10。
toFixed(decimalPoints)
用途:将一个数字转为保留指定位数的小数,小数位数超出指定位数时进行四舍五入。
参数:decimalPoints为保留小数的位数。
文章结尾提供本期组件的原件下载地址,随时可下载。
显示效果
![](https://img.haomeiwen.com/i6332485/f00a50fa2344fc85.gif)
实现方式
1.图层分析。通过内置图形制作仪表盘,通过钢笔工具制作指针,这里主要说明一下其中一个仪表的制作过程:
![](https://img.haomeiwen.com/i6332485/10c9c2e0e903e5d6.png)
![](https://img.haomeiwen.com/i6332485/05477f0bbad22f0d.png)
事件设置
主要原理为:
1,启动是随机移动一个角度,并随机转回来,同时设置显示的数据,然后重复这个动作。
具体如下:
![](https://img.haomeiwen.com/i6332485/7482ae100a4d234b.png)
~以上便是本次小组件的全部内容~
原件下载
链接:https://pan.baidu.com/s/1pP51KoqSy2RLzZEnoqCwxg
提取码:c2i3
~~~
18岁提示:以上文件完成于axure 8版本。
定期会将组件整理成完整文件统一发布。
原创文章,转载请标明出处。