引言

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

ProgressBar 组件

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

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

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

ProgressBar 属性

属性	功能说明
Bar Sprite	进度条渲染所需要的 Sprite 组件，可以通过拖拽一个带有 Sprite组件的节点到该属性上来建立关联。
Mode	支持 HORIZONTAL（水平）、VERTICAL（垂直）和 FILLED（填充）三种模式，可以通过配合 reverse 属性来改变起始方向。
Total Length	当进度条为 100%时 Bar Sprite 的总长度/总宽度。在 FILLED 模式下 Total Length 表示取 Bar Sprite 总显示范围的百分比，取值范围从 0 ~ 1。
Progress	浮点，取值范围是 0~1，不允许输入之外的数值。
Reverse	布尔值，默认的填充方向是从左至右/从下到上，开启后变成从右到左/从上到下。

详细说明

添加 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）