首页
业务
关于
客户
服务
联系
13520390899
资 深 的 互 联 网 开 发 服 务 商
专注于 网站开发 / 小程序开发 / APP开发 / 软件开发
网十科技 > 动态

固安小程序开发讲述: 水滴式进度条详细操作及解释

开始入门Axure时候,都会有一种想法,怎么才能最简单明了的体会到这个软件的功能呢?从最基础的开始按钮,到后面的小程序连接,渐渐地引导我入门。当我学习到进度条时候,网上也有许多版本。当时学习了一段时间,也折腾了一段时间才学会,网上教程也很模糊,所以给新入门的朋友详细的操作。

下图是做出来的效果:

操作技巧:

1、首先拉出一个矩形,命名为进度框;

2、然后复制这个矩形,将背景颜色换成另外一种颜色如粉红,然后右键这个矩形转化为动态面板,并命名这个动态面板为进度条,如下图所示:

3、将上述的进度条拉入进度框中,让它们两个重叠,同时从元件库中的标记元件中把水滴标记拉出来,然后把水滴标记命名为百分比,如下图所示,我们完成了基本的布局,后面就是我们进行动画效果的添加了

4、先对进度条进行设置,交互方式选择载入时,在打开的界面中,添加动作选择设置尺寸,,右边的配置动作勾选进度条,然后设置下面的宽,点击fx,打开编辑界面,首先添加局部变量LVAR1,选择属性为元件进度框,然后再上面的变量设置为[[LVAR1.width/100]],意思是进度条每一次移动进度框的1%,然后确认就好了,如下图所示

5、同样还是设置进度条的动作,交互方式为尺寸改变时,首先设置进度条的界限,防止进度条出界;进入用例编辑后,双击case1,如下图操作:

在上述截图中的6中,再添加变量,如下图:

6、添加100ms的延时,因为在打开小程序运行会有一段时间,这里最好延时一下,然后再设置进度条的动作,如下图所示,在上述的尺寸改变交互方式中,左边的添加动作设置尺寸,然后右边的配置动作,勾选进度条,下边的宽中点击fx,[[LVAR2.width+LVAR1.width/100]]即为进度条的坐标加上每次移动进度框1%的坐标,实现动画的效果。

7、这步是最关键的一步,实现水滴跟随进度条一起走,关键的是定位水滴标记的坐标,首先我们看一下水滴标记的图形,如下图,定位水滴标记的位置不是下边最尖的部分,而是左右的边界:

所以以进度框最左边的边界为起点,那么水滴最下端在原点的时候,实际坐标就是负的,了解这点后,后面的操作就简单了;在前面的基础上,添加动作移动,然后再配置动作中勾选百分比,移动选择绝对距离,点击X的fx,如下图所示,添加两个局部变量,LVAR1进度条,LVAR2百分比,函数输入:

7x24
售后服务支持
10
故障时长赔付
16
16年行业服务经验
20
售后服务人员
70
设计、开发团队
10
国内顶尖技术专家
1000
大型及上市企业
版权所有 © 北京网十互动科技有限公司 网站 APP 小程序 软件 备案号:京ICP备16050073号-2

电话咨询