cocos creator UI节点 ProgressBar 进度条基础应用

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
        }
    }

 

尾语

进度条这一个知识点，基础应用结束，里面没有添加热河样式，炫酷华丽的进度条一般都是应用图片处理的显隐方式进行呈现。

每天进步一点点，每天积累一个知识点将是你最大的进步。

最后很喜欢的一首歌曲送给大家和我自己。 还未结束，你还未败.

梦回当年古战场

一身傲骨被模仿

帝王血 在流淌

塑造不败封神榜

封神榜 留我名

漫天风雪随风停

........