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).fillRangeif(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属性值就不会更新，进度条就不会走
}

Cocos Creator之进度条功能（一）相关推荐

python实现http下载文件-Python HTTP下载文件并显示下载进度条功能的实现
下面的Python脚本中利用request下载文件并写入到文件系统,利用progressbar模块显示下载进度条. 其中利用request模块下载文件可以直接下载,不需要使用open方法,例如: im ...
php带截切图片上传_PHP大文件切割上传并带进度条功能示例
本文实例讲述了PHP大文件切割上传并带进度条功能.分享给大家供大家参考,具体如下: 前面一篇介绍了PHP大文件切割上传功能,这里再来进一步讲解PHP大文件切割上传并带进度条功能. 项目结构图: 14- ...
如何用HTML语言设计进度条,html5代码如何实现进度条功能？（示例）
本篇文章主要介绍html5代码如何实现进度条功能,希望对大家有所帮助. html5代码实现进度条功能具体代码示例如下:/*实现进度条的功能*/ 下载进度: /*js代码*/ var pg=docume ...
html canvas直线进度条,js+HTML5 canvas 实现简单的加载条(进度条)功能示例
本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能.分享给大家供大家参考,具体如下: www.jb51.net canvas实现加载条动画 /* * 获取canvas, ca ...
.Net Framework4.5中Asp.net mvc使用Singal R轮训实现导入进度条功能
.Net Framework4.5中Asp.net mvc使用Singal R轮训实现导入进度条功能我的项目需求是:在.net4.5中用mvc5实现上传xml文件,后台实时导入数据库时传到前台进度, ...
php上传完没进度条_php使用APC实现实时上传进度条功能
这篇文章主要介绍了php使用APC实现实时上传进度条功能,php本身不具备可以带有实时上传进度条功能,但是php提供了一个apc,它可以与php配置实现上传进度条,感兴趣的小伙伴们可以参考一下 php ...
python progressbar 倒计时_Python使用progressbar模块实现的显示进度条功能
本文实例讲述了Python使用progressbar模块实现的显示进度条功能.分享给大家供大家参考,具体如下: progressbar安装: pip install progressbar 用法一 # ...
springboot：实现文件上传下载实时进度条功能【附带源码】
0. 引言记得刚入行的时候,做了一个文件上传的功能,因为上传时间较久,为了用户友好性,想要添加一个实时进度条,显示进度.奈何当时技术有限,查了许久也没用找到解决方案,最后不了了之. 近来偶然想到这个 ...
android解压zip文件进度条,Android实现文件解压带进度条功能
解压的工具类 package com.example.videodemo.zip; public class ZipProgressUtil { /*** * 解压通用方法 * * @param zi ...

Cocos Creator之进度条功能（一）

Cocos Creator之进度条功能（一）相关推荐

最新文章

热门文章