Axure 静态进度条制作

点击预览效果


1、在画布中拖入两个“巨型2”元件,分别填充背景为灰色和绿色,再将灰色背景元件名称设置为“背景”,绿色背景元件名称设置为“进度条”;


2、将两个元件完全重叠,进度条元件置于上方并设置内容为“25%”(可任意设置百分比);

3、选中进度条元件添加“载入时”事件,并添加动作“设置尺寸”;

4、设置动态宽度,添加局部变量“ProgressValue”和“BackWidth”,详细设置如下图,局部变量添加完成后再在插入变量和函数栏目填写计算“公式[[BackWidth.width/100*ProgressValue.replace('%','')]]”后保存;


运行效果如下


公式说明:“[[BackWidth.width(获取背景元件宽度)/100(将背景宽度分成100份)*ProgressValue(获取进度条内文字信息).replace('%','')(替换获取到的文字信息中的百分号)]]

注意:局部变量名不能含有中文和特殊符号,最好是输入英文字母。





分享到: 更多 ()

评论

    暂无评论,快来抢沙发吧!