引言

在开发中经常会用到各种各样的进度条，比如说某个操作的进度、加载的进度等等，那么在Cocos Creator中是怎么实现进度条的？

ProgressBar 组件

ProgressBar（进度条）经常被用于在游戏中显示某个操作的进度，在节点上添加 ProgressBar 组件，然后给该组件关联一个 Bar Sprite 就可以在场景中控制 Bar Sprite 来显示进度了。

点击 属性检查器 下面的添加组件按钮，然后从添加 UI 组件中选择ProgressBar，即可添加 ProgressBar 组件到节点上。

进度条的脚本接口请参考ProgressBar API。

ProgressBar 属性

详细说明

添加 ProgressBar 组件之后，通过从 层级管理器 中拖拽一个带有Sprite组件的节点到 Bar Sprite 属性上，此时便可以通过拖动 progress 滑块来控制进度条的显示了。

Bar Sprite 可以是自身节点，子节点，或者任何一个带有Sprite组件的节点。另外，Bar Sprite 可以自由选择 Simple、Sliced 和 Filled 渲染模式。

进度条的模式选择 FILLED 的情况下，Bar Sprite 的 Type 也需要设置为 FILLED，否则会报警告。详细使用说明请查阅ProgressBar UI 控件介绍。

范例创建进度条

在使用Cocos Creator中我们经常要用到控件跟脚本语言关联，这个关联的过程我总结出来两种模式，下面就用Progressbar这个控件来尝试使用

创建新的ProgressScene，创建ProgressBar控件名为progressBarView，然后在progressBarView上添加脚本文件ProgressBarScript。

第一种模式拖拽关联

创建脚本文件，当然我们在创建脚本文件的时候，需要自定义properties属性来让脚本这个类来接收UI控件并关联

cc.Class({
    extends: cc.Component,


    // 脚本自定义的属性，当前自定义的属性会在属性检查中查看到
    properties: {
        speed: 1,
        progressBarView: {
            type: cc.ProgressBar,
            default: null
        }
    },

    //当我们将脚本添加到节点 `node`上面的时候
    onLoad: function () {

        this._ping = true;
        this.progressBarView.progress = 0;
    },

    update: function (dt) {
        this._updateProgressBar(this.progressBarView, dt);
    },
    
    _updateProgressBar: function(progressBar, dt){

        var progress = progressBar.progress;
        if(progress < 1.0 && this._ping){
            progress += dt * this.speed;
        }
        else {
            progress -= dt * this.speed;
            this._ping = progress <= 0;
        }
        progressBar.progress = progress;
    }
    
});

当我们在写完这些的时候，将脚本文件添加到节点上面,拖拽创建的控件ProgressBar到我的属性progressBarView上，这样程序就会发现进度条在走，如图

第二种模式代码关联

第二种模式根本上来讲，使用代码的形式获取到你需要的控件，然后去使用这个控件。

注意:在具体实施的时候，为了在重复代码，我们在properties添加属性progressBarView来接收代码获取到的控件。

cc.Class({
    extends: cc.Component,
    properties: {
        speed: 1,
        progressBarView: {
            type: cc.ProgressBar,
            default: null
        }
    },

    onLoad: function () {
        this._ping = true;
        var Prog = this.node.getComponent(cc.ProgressBar);
        this.progressBarView = Prog;
        this.progressBarView.progress = 0;
    },

    update: function (dt) {
        this._updateProgressBar(this.progressBarView, dt);
    },
    
    _updateProgressBar: function(progressBar, dt){

        var progress = progressBar.progress;
        if(progress < 1.0 && this._ping){
            progress += dt * this.speed;
        }
        else {
            progress -= dt * this.speed;
            this._ping = progress <= 0;
        }
        progressBar.progress = progress;
    }
    
});

运行结果

个人博客 ：玩溜Cocos Creator入门学习（六）UI系统介绍UI组件（ProgressBar）