Skip to content

ProgressBar

用於表現進度條的效果。

ProgressBar 屬性

ProgressBar示例

屬性 功能說明
Bar Sprite 進度條渲染所需要的 Sprite Component
Mode 進度條展現方式,選項包括 水平HORIZONTAL、垂直VERTICAL、填充FILLED
Total Length 當進度條為 100% 時,Bar Sprite的總長度/總寬(高)度。在FILLED模式下Total Length表示取Bar Sprite總顯示範圍的百分比,取值範圍從 0-1
Progress Float,表示當前進度,0-1
Reverse Boolean,原進度條方向為左到右/上到下,True 後變為右到左/下到上

Note

ProgressBarMode 選擇 FILLED 的情况下,Bar SpriteType 也需要設定為 FILLED,否則會出現警告。

水平與垂直模式 HORIZONTAL & VERTICAL

當我們選擇 HORIZONTALVERTICAL 時,ProgressBar 會透過修改 Bar Sprite 的尺寸來感變進度條的顯示長度

在這在個模式底下 Total Length 的單位是 Pixel,用來指定當進度條到 100%時 Bar Sprite 的長度

填充模式 FILLED

HORIZONTALVERTICAL 不同的是,FILLED 會通過一定的比例裁剪 Bar Sprite,因此我們需要對Bar Sprite中引用的Sprite Component 做設定

首先將Sprite中的Type設定為FILLED,然後選擇一個方向HORIZONTALVERTICALRADIAL

下圖的範例顯示了當Bar SpriteType設定為RADIAL時不同的Total Length對其影響

FILLED範例

參考資訊

Cocos Creator 官方-ProgressBar

Cocos Creator 官方-常用 UI 控件(2.4)