激发我写这个博客的原因是因为当时想做一个进度条(图形不是方方正正的,两侧是圆角,通过使用ProgressBar组件,在伸缩时会发生变形,不能满足进度条功能,通过同事的指点,发现这个圆角图片实现进度条可以使用Sprite组件的Filled渲染模式,因此将这个问题总结以帮助和我一样遇到这个问题的人,或者至少我可以从这里总结经验)
使用Sprite组件实现进度条功能:
Sprite组件的渲染模式有五种类型(Type):如下图所示,分别为
SIMPLE(普通),
Sliced(九宫格),
Tiled(平铺),
Filled(填充),
Mesh(网格)。
Filled渲染模式下的属性:
当Sprite的Type为Filled时,其属性(如下图所示)有:
fillType : HORIZONTAL(横向填充)、VERTICAL(纵向填充)和 RADIAL (扇形填充);
fillStart:表示填充起始位置的标准化数值(从0-1,表示填充总量的百分比),当fillType 为HORIZONTAL时,fillStart 设为 0,就会从图像最左边开始填充;若fillStart 设为 0.5,则从中间开始填充,最多填充原始图像的50%;
fillRange:填充范围的标准化数值(从 0 ~ 1),若设为 1,就会填充最多整个原始图像的范围;默认填充方向:若fillType 为HORIZONTAL,则当fillRange为正值,自左向右填充,为负值,自右向左填充;若fillType 为VERTICAL,则fillRange为正值,则默认自下而上填充,若为负值,自上而下填充;
fillCenter:填充中心点,只有选择了 RADIAL 类型才会出现这个属性。决定了扇形填充时会环绕 Sprite 上的哪个点(填充时的中心位置),所用的坐标系和 Anchor 锚点 是一样的。
针对进度条的功能,大体也能猜到该使用Type下的哪一个属性来实现进度条的效果。没错,就是fillRange属性。功能的核心是根据工具的使用情况针对性的动态修改Sprite组件的fillRange属性值。
fillType的选择与默认起始点位置和默认填充方向
fillType :HORIZONTAL
|fillStart|值为0时,起点在左侧;值为1时,起点在右侧|
|fillRange| 值为正值时,自左向右填充;值为负值时,自右向左填充|
fillType :VERTICAL
|fillStart|值为0时,起点在下方;值为1时,起点在上方|
|fillRange| 值为正值,则默认自下而上填充,若为负值,自上而下填充|
fillType :RADIAL
|fillStart|值为0时,起点在正右方;值为0.25时,起点在正上方;值为0.5,正左方;值为1,回到0的位置,|
|fillRange| 值为正值,则默认逆时针方向填充,若为负值,则顺时针方向填充|
如下图所示:
下面让我们来实操一下吧(代码实践):
功能:想实现肥皂涂泡泡过程中,生成泡泡数量达到100个,这个工具使用就结束了(需显示进度条)。
算法:每生成一个泡泡,就让Sprite组件下的fillRange属性自加1/100(fillRange最大值为1)
代码:
onLoad(){
this.bubble_num = 0 // 泡泡初始化数值为0
},
// 此函数放在生成泡泡的语句之后执行即可,
progress_bar_update(){
this.bubble_num++ // 这句可以放在生成泡泡之后,调用更新进度条函数之前,由于这里没有写生成泡泡的函数,因此暂时放在这里,也不影响使用
let progress_bar = this.node.getChildByName('progress_bar') // 进度条Sprite组件所在节点
let update_fillRange = progress_bar.getComponent(cc.Sprite).fillRange
if(update_fillRange < 1){
update_fillRange = 1 / 100 * this.bubble_num
} else {
update_fillRange = 1
}
progress_bar.getComponent(cc.Sprite).fillRange = update_fillRange //update_fillRange 数值计算完之后,需要重新赋值给Sprite组件的fillRange属性,这点很重要(本人曾经忽略过这里,没有赋值,组件的fillRange属性值就不会更新,进度条就不会走
}