Cocos Creator之进度条功能（一）

激发我写这个博客的原因是因为当时想做一个进度条（图形不是方方正正的，两侧是圆角，通过使用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属性值就不会更新，进度条就不会走
}