加载进度条在PC端的文件上传、下载，APP端的部分进度展示都是不可缺少的一部分。
加载进度条.gif
准备
- Axure 9（或Axure 8）软件已安装。（注：本案例使用Axure 9制作）
- 掌握基本的软件使用。
- 熟悉函数知识（获取元件基础属性）。
- 熟悉动态面板。
本教程知识点
- 基础函数应用。
- 基础动态面板应用。
详细教程--手机端滚动选择器
本文以手机端APP更新页面下载进度为例，展示基础的加载进度条与下载进度。
功能
点击立即更新，展示下载进度条，同时进度条进行进度展示和当前进度百分比展示。
制作方式
1、搭建基础的案例框架。本案例除加载进度条部分需要设计交互，其它均为静态，只需注意排版布局即可。
2、加载进度条部分搭建
-
思路拆分：加载进度条部分分为立即更新动态面板状态和下载中动态面板状态。点击立即下载，切换至下载中，同时进行对应进度和进度数值的动态展示。
-
创建立即更新动态面板内容：一个矩形
-
创建下载中的动态面板内容：
- 基础部分：进度条、进度值、进度底部背景（but-bg）。
- 动效触发部分：计数器（动态面板），通过动态面板的状态改变，去重复变更进度条的宽度和进度值得更像（计数器的动态面板至少两个状态）。
3、进度条部分的交互
-
立即更新交互：
- 点击立即更新后，触发切换加载进度条动态面板的状态更新，切换至下载中状态。
- 同时触发计数器动态面板向后切换（向后循环）。
-
下载中的交互
- 进度条的加载展示
- 通过计数器的面板状态切换，每切换一次，设置进度条的宽度加十。
- 同时设置宽度的变化为一个线性的动画，时间与计数器动态面板切换时间一致为100。保证加载在视觉上展示流畅。
- 进度值的加载展示
- 相同的原理，在计数器动态面板切换的时候，计算出进度条宽度与进度底部背景（but-bg）比例值即可。
- 如何计算百分比：采用math.ceil(x)函数，计算公司如下：进度 = （进度条宽度 / 进度底部背景（but-bg）） %。
函数小课堂：函数说明。
- jdt.width函数：jdt是自定义指定的元件名称（将进度条元件绑定名称为jdt）；.width为某某的宽度。组合起来为进度条的宽度。
- math.ceil(x)函数为向上取整函数，返回大于或等于参数x，并且与之最接近的整数。
- 加载到了100%后，自动停止。
- 添加状态改变是的情形编辑，让进度条宽度小于进度底部背景（but-bg）宽度，动态面板切换进行上两步交互的执行（进度条的加载展示、进度值的加载展示）。不满足时，不再进行。
- 当进度条宽度等于进度底部背景（but-bg）宽度，设置最终的进度值为100%。
总结
- 动态面板的切换作为一个中间件，触发部分需要频繁更新的元件。
- 函数基本上包含了常用的计算方式，随用随查。
- 多种交互情形一定要注意先后的顺序，Axure一般按照从上到下的顺序执行。
负坐标网出品。
负坐标网是一个拥有高质量原型模版、组件库的交易平台。
网址：www.fuzuobiao.com
网友评论