说明
在界面中,用户在等待的时候总是容易产生一种焦急的心态,所以为了能给用户带来更好的产品体验,进度条能够转移用户的注意力,并且向用户提供事情进展的信息,让用户的等待有了盼头,从而改变了用户等待时的心态。
条形进度条
演示
制作过程
步骤1:创建控件
- 创建一个400X20的矩形框,充当进度条的外框。
- 创建一个1X20的灰色填充矩形条,充当加载进度条。
- 一个文本标签。
步骤2:设置变量
- 创建一个变量【long】值为0.
步骤3:载入时设置进度条的交互
- 用例:当变量【long】大于等于0和小于400时。
- 设置变量值【long】等于【long+1】
- 设置大小长度等于【long】时间12毫秒
- 等待0秒(也可以不加,但建议加)
- 触发事件
步骤4:载入时设置文本标签的交互
- 设置文本标签文本值为[[math.floor(“进度条的宽度/400*100”]]%(floor()函数表示取整数)
- 等待0秒(也可以不加,但建议加)
- 触发事件
环形进度条
演示
制作过程
步骤 | 说明 | 图例 |
创建组件 | 1、创建四个半圆环,分别为上白、上灰、下白、下灰 | |
2、图层顺序:上白>上灰>下白>下灰 | ||
3、组合一起:将组件组合在一起,并剧中对齐,上方放上标签文字用来表示加载进度(默认隐藏)。 | ||
设置交互 | 页面加载时: 1、显示标签文字 2、相对顺时针旋转“上灰”180度,锚点为底部,动画为线性,时间为3500毫秒 3、等待3600毫秒 4、将“下灰”至于顶层 5、相对顺时针旋转“下灰”180度,锚点为底部,动画为线性,时间为3600毫秒 | |
标签文字显示时: 1、设置标签文字为ceil ( (“上灰”的角度+“下灰”的角度-180) /3.6)%(ceil()函数:向上取整) 2、等待0毫秒 3、隐藏“标签文字” 4、显示“标签文字” |