1.创建进度条节点
在cocos画布下创建一个进度条节点,进度条的节点中会带有进度条组件。
至于进度条的样式需要在进度条节点的属性中进行调整
2绑定脚本和进度条
在canvas画布的属性挂载进度条相应的脚本,要在脚本中生命属性进度条,并把进度条节点拖进画布属性中对应的上面。
我这里创建了one.js 作为进度条的脚本,并绑定了。
在属性中timeCount属性是生命自己需要多长时间的, 最大是60秒。
绑定完毕
3.进度条缓慢增加
首先在应用进度条中不要把进度条放进update函数中,因为更新函数中每秒运行60次,
放进start 开始函数中比较好
// 进度条增加
this.tmpTimeCount = 0;
this.callback = function () {
this.tmpTimeCount += 0.1;
// 判断进度条的比例
this.jindutiao1.progress = this.tmpTimeCount / this.timeCount;
};
if (this.jindutiao1) {
// 计时器函数
this.schedule(this.callback, 0.1, this.timeCount / 0.1, 0)
}
4.计时器函数
this.schedule(this.callback, 0.1, this.timeCount / 0.1, 0)
以上述的计时器为例,这个计时器是cocos 提供的函数,里面有四个参数
// 参数1.调用执行的回调函数
// 参数2.每间隔多长时间执行一次,单位秒
// 参数3.这个计时器执行多少次
// 参数4.延迟的时间,单位秒
5.进度条减少,和点击减少
// 进度条缓慢减少
this.tmpTimeCount1 = 1;
this.callback = function () {
this.tmpTimeCount1 -= 0.01;
// 判断进度条的比例,缓慢减少的话,以1为总,来确定自己的时间
this.jindutiao2.progress = this.tmpTimeCount1;
};
if (this.jindutiao2) {
this.schedule(this.callback, 0.1, this.tmpTimeCount1 / 0.01, 0)
}
jianshao(){
if(!this.jindutiao3.progress<=0){
this.jindutiao3.progress -=0.1
}else{
console.log("进度条已为0")
return
}
}
尾语
进度条这一个知识点,基础应用结束,里面没有添加热河样式,炫酷华丽的进度条一般都是应用图片处理的显隐方式进行呈现。
每天进步一点点,每天积累一个知识点将是你最大的进步。
最后很喜欢的一首歌曲送给大家和我自己。 还未结束,你还未败.
梦回当年古战场
一身傲骨被模仿
帝王血 在流淌
塑造不败封神榜
封神榜 留我名
漫天风雪随风停
........