AXURE-030-组件-进度条动效

封面

hi，大家好，我是18岁fantasy。本期小组件为一个进度条效果，主要用到axure的设置尺寸效果，数值函数处理（toFixed(decimalPoints)）等知识点。

toFixed(decimalPoints) 函数解释

将一个数字转为保留指定位数的小数，小数位数超出指定位数时进行四舍五入，如果超过实际小数位，则补充0。参数：decimalPoints为保留小数的位数。

例如：[[12.126.toFixed(2)]]  =  1.13；  [[12.126.toFixed(5)]]  =  1.12600；

也可查看本连载中的axure函数完整篇：

https://www.jianshu.com/p/031b391c7ced

文章结尾提供本期组件的原件下载地址，随时可下载。

显示效果

这里提供两种基本的效果，讲解其中一种效果的实现方式。

显示效果

实现方式

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，欢迎关注！

公众号