封面
hi，大家好，我是18岁fantasy。本期小组件为一个进度条效果，主要用到axure的设置尺寸效果，数值函数处理（toFixed(decimalPoints)）等知识点。
toFixed(decimalPoints) 函数解释
将一个数字转为保留指定位数的小数，小数位数超出指定位数时进行四舍五入，如果超过实际小数位，则补充0。参数：decimalPoints为保留小数的位数。
例如：[[12.126.toFixed(2)]] = 1.13； [[12.126.toFixed(5)]] = 1.12600；
也可查看本连载中的axure函数完整篇：
文章结尾提供本期组件的原件下载地址，随时可下载。
显示效果
这里提供两种基本的效果，讲解其中一种效果的实现方式。
显示效果
实现方式
1.图层分析
图层主要由如下部分组成。其中背景2和进度条做了渐变处理。
图层
图层顺序
图层顺序
2、事件设置
原理：
1、页面加载时设置，进度条宽度为0.
2、每500毫秒进度条宽度+10，锚点设置为进度条左边。
3、同时设置进度数值为（进度条宽度/进度条背景宽度*100）.toFixed(0)]]。
4、同时移动跟随图片，x值+10。
5、循环以上页面加载事件。
6、设置事件条件为，进度数值<100时触发。
具体如下图所示：
事件设置
~以上便是本次小组件的全部内容~
原件下载
链接：https://pan.baidu.com/s/12M3RUtwUjANlkGd6iPfeng
提取码：dl1j
18岁提示：以上文件完成于axure 9版本。
定期会将组件整理成完整文件统一发布。
原创文章，转载请标明出处。
~感谢阅读和关注~同名公众号，18岁fantasy，欢迎关注！
公众号
网友评论