精选_【Cocos Creator实战教程(8)】——UI组件（2）ProgressBar 组件_源码打包

# 【Cocos Creator实战教程(8)】——UI组件（2）ProgressBar 组件 # 1. 知识点讲解 ProgressBar（进度条）经常被用于在游戏中显示某个操作的进度，在节点上添加 ProgressBar 组件，然后给该组件关联一个 Bar Sprite 就可以在场景中控制 Bar Sprite 来显示进度了。  点击 **属性检查器** 下面的添加组件按钮，然后从添加 UI 组件中选择`ProgressBar`，即可添加 `ProgressBar` 组件到节点上。 ## 1.1 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 | 布尔值，默认的填充方向是从左至右/从下到上，开启后变成从右到左/从上到下。 | ## 1.2 详细说明 添加 `ProgressBar` 组件之后，通过从 层级管理器 中拖拽一个带有`Sprite`组件的节点到 `Bar Sprite`属性上，此时便可以通过拖动 progress 滑块来控制进度条的显示了。 `Bar Sprite` 可以是自身节点，子节点，或者任何一个带有`Sprite`组件的节点。另外，`Bar Sprite` 可以自由选择 `Simple`、`Sliced` 和 `Filled` 渲染模式。 进度条的模式选择 `FILLED` 的情况下，`Bar Sprite` 的 `Type` 也需要设置为 `FILLED`，否则会报警告。 # 2. 步骤 创建新的`ProgressScene`，创建`ProgressBar`控件名为`progressBarView`，然后在`progressBarView`上添加脚本文件`ProgressBarScript`。 创建脚本文件，当然我们在创建脚本文件的时候，需要自定义`properties`属性来让脚本这个类来接收UI控件并关联 ```javascript 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 //dt:Number the delta time in seconds it took to complete the last frame 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; } }); ``` 当我们在写完这些的时候，将脚本文件添加到`节点`上面,拖拽创建的控件`ProgressBarView`到我的属性`progressBarView`上，这样程序就会发现进度条在走。  # 3. 总结 在现实中，我们可能需要从服务器预加载资源，这时就需要进度条来表示进度。比如使用cc.loader加载资源，同时监控加载进度，之后再用update显示。 本资源部分素材来源于网络。