#Axure#进度条

背景:一般用于网页登录状态,或者需要一定比例的槽值。

应用场景:进度条、槽值。

步骤:

Step1,在默认页面,拖入背景矩形、文本标签。其中,数字的文本标签命名为text,进度条的背景矩形命名为background。background的长300,高20。

#Axure#进度条

Step2,拖入动态面板,命名为panel。panel的长1,高20。填充色为白色,新增1个状态,即存在2个状态。

#Axure#进度条

Step3,交互的注意思路:

1、页面载入时,panel自动向右填满进度条背景;

2、在panel变化时,数字的文本标签也一直在往100变化;

3、当panel填满进度条背景、数字标签为100时,两者自动停止变化。

针对第1点和第3点,得出思路:

①当panel的宽度小于进度条背景的宽度时,panel变化的宽度尺寸,等于panel自身宽度+进度条背景的宽度/100。数值最后在100%时停止变化。

②当panel的宽度等于进度条背景的宽度时,panel的宽度变化停止。

针对第2点,得出思路:

在panel的宽度发生变化时,数字标签的值等于panel的宽度/进度条背景的宽度*100,同时,将结果四舍五入。

Step4,设置交互。

a.选中panel。

#Axure#进度条

①状态改变时

如果panel.width<background.width时,设置panel的尺寸,长为panel.width+background.width/100,高为background.height,锚点在左侧,线性50毫秒;

如果panel.width=background.width时,设置panel的停止循环状态。

②尺寸改变时

设置数字text为Math.ceil(panel.width/background.width*100)%

设置panel的状态为下一项,循环。

b.驱动设置。可以选择单击按钮,也可以选择页面载入时。本案例设置为页面载入时。

不选择任何元件。

#Axure#进度条

在页面载入时,设置panel的尺寸,宽为background.width/100,高为background.height,锚点在左侧。

至此,完成进度条的制作,可以预览查看效果。

#Axure#进度条:等您坐沙发呢!

发表评论

表情
还能输入210个字