cocos2dx：進度條ProgressTimer的使用

目錄

ProgressTimer

條形進度條

圓形進度條

---

ProgressTimer

在Cocos2d-x中，進度條ProgressTimer分爲兩種：圓形（RADIAL）和條形（BAR），使用方法setType進行類型設置！

關於ProgressTimer的方法可以直接查看官網API或在引擎中找到CCProgressTimer.cpp文件查看源碼！

下面介紹一下在Cocos2d-lua中ProgressTimer的使用方法：

條形進度條

local barProBg = cc.Sprite:createWithSpriteFrameName("bar_progress_bg.png")  -- 條形進度條背景，若不需要可以省去
local sprite = cc.Sprite:createWithSpriteFrameName("bar_pregress.png")
self.barPro = cc.ProgressTimer:create(sprite)  -- 必須使用精靈創建進度條
--[[
    setType：設置進度條類型
    cc.PROGRESS_TIMER_TYPE_RADIAL爲圓形
    cc.PROGRESS_TIMER_TYPE_BAR爲條形
]]
self.barPro:setType(cc.PROGRESS_TIMER_TYPE_BAR)
--[[
    setMidpoint：設置進度條的起點位置：cc.p(x, y)
    cc.p(0, 0)爲左下角
    cc.p(1, 1)爲右上角
    e.g.
    cc.p(0, y)：x爲0，不管y爲0還是1，水平方向的起點爲最左邊，則進度條減少的方向爲從右到左
    cc.p(x, 1)：y爲1，不管x爲0還是1，垂直方向的起點爲最上邊，則進度條減少的方向爲從下到上
]]
self.barPro:setMidpoint(cc.p(0, 0))
--[[
    setBarChangeRate：設置垂直和水平方向的進度：cc.p(x, y)
    x和y分別爲水平方向和垂直方向，其值均爲0或1，0表示該方向沒有進度，1表示該方向有進度
    e.g.
    cc.p(1, 0)表示水平方向有進度，垂直方向無進度
    cc.p(1, 1)表示水平和垂直方向都有進度
]]
self.barPro:setBarChangeRate(cc.p(1, 0))
local size = barProBg:getContentSize()
self.barPro:setPosition(cc.p(size.width/2, size.height/2))
barProBg:addChild(self.barPro)
self.barPro:setPercentage(66)  -- 設置進度：0-100

ps：

setMidpoint和setBarChangeRate共同確定條形進度條的顯示類型！

圓形進度條

local radialProBg = cc.Sprite:createWithSpriteFrameName("radial_progress_bg.png")  -- 圓形進度條背景，若不需要可以省去
local sprite = cc.Sprite:createWithSpriteFrameName("radial_pregress.png")
self.radialPro = cc.ProgressTimer:create(sprite)  -- 必須使用精靈創建進度條
--[[
    setType：設置進度條類型
    cc.PROGRESS_TIMER_TYPE_RADIAL爲圓形
    cc.PROGRESS_TIMER_TYPE_BAR爲條形
]]
self.radialPro:setType(cc.PROGRESS_TIMER_TYPE_RADIAL)
--[[
    setReverseDirection：設置進度條的方向（只針對圓形進度條）
    true爲順時針
    false爲逆時針
]]
self.radialPro:setReverseDirection(true)
local size = radialProBg:getContentSize()
self.radialPro:setPosition(cc.p(size.width/2, size.height/2))
radialProBg:addChild(self.radialPro)
self.radialPro:setPercentage(66)  -- 設置進度：0-100