classification: 实战axure
title: 在axure中使用动态面板的Panel State Changed事件作为开关实现进度条组件
tag: 进度条 dynamic panel Panel State Changed事件
author: 嘟嘟宝嘟
Date: 2020年12月6日
在axure中使用动态面板的Panel State Changed事件作为开关实现进度条组件
在Axure中，动态面板的状态改变与切换就像是电路中的二极管和三极管，可以很方便地实现组件的状态改变，实现对组件的控制。
在本实例中，我们来利用动态面板的Panel State Changed事件来实现进度条的原型设计。
1. 组件准备
为了方便分类，将loading组件分为三个部分：
- 展示组件(Group:
componentsshown)； - 开关组件(dynamicpanel:
switch)； - 外部的触发组件(button:
开始)，如上图所示。
在展示组件中，
- label组件“进度”显示进度百分比。
- 进度槽限定进度条前进的范围。
- 进度条图形化显示进度前进情况。
一般的原型设计，进度条都在进度槽的上层，但是在本设计当中，我将进度槽放在了进度条上方，通过进度槽图形的掩板限制进度条显示，这样可以免去进度条的尺寸计算。
进度条的初始长度为1（无法设置为0），由于被进度槽遮挡无法看到。
2. 组件的事件
2.1. 动态面板（switch）的Panel State Changed事件
当进度条的长度小于进度槽的长度时，进度条的长度增加进度槽长度的1%。其实在这个时候，由于Axure的机制，会紧接着触发进度条组件的resized事件。
当进度条的长度大于等于进度槽的长度时，跳出循环，结束动态效果。
2.2. shape组件（进度条）的resized事件
当进度条改变尺寸的时候，将当前进度计算出来写入label组件（进度）。
这里用到了数学函数Math.ceil()，其实也可以通过其他函数或方法实现，这和具体算法设计相关，无所谓对错。
然后继续去触发switch组件的Panel State Changed事件，进行下一个循环。
2.3. button组件（开始）的click事件
在实际的设计当中，如何触发进度条显示并工作，需要根据实际情况决定，本案例中只是通过开始按钮来触发进度条工作。
首先初始化文字内容（也可以同时初始化进度条尺寸、位置等），然后通过set panel state方法触发switch开关，使进度条开始工作。
3. 实现效果
点击开始按钮，我们看到进度条可以正常工作。
这个设计有一些小缺陷，比如连续点击开始按钮，会导致最终进度条会稍微超出进度槽的长度，进度百分比显示也会大于100%，可以通过修改switch的Panel State Changed 事件中的isfull方法实现。
