環境：cocos2d 3.10 Lua
參考: ActionsProgressTest
其進度條動畫，我們主要使用的類有： ProgressTo， ProgressFromTo， ProgressTimer。
如下是其類繼承圖：
ProgressTo: 進度控制，在指定時間內達到指定百分比
ProgressFromTo: 進度控制，在指定時間內從一個百分比到另一個百分比
ProgressTimer: 根據百分比渲染內部的精靈，其變化可以是水平的或者垂直的。(注意渲染的是Sprite而不是ImageView)
ProgressTo與ProgressFromTo的實現，要借助於ProgressTimer。
因此我們來簡要說明下ProgressTimer的C++常用方法：
| 方法 | 說明 |
| static ProgressTimer* create(Sprite* sp) | 創建進度條，其參數為精靈對象 |
| void setSprite(Sprite *sprite) | 設置進度條使用的Sprite對象 |
| Sprite* getSprite() | 獲取進度條使用的Sprite對象 |
| void setType(Type type) | 設置進度條的類型，有兩種： RADIAL: BAR: |
| Type getType() | 獲取進度條類型 |
| void setPercentage(float percentage) | 設置進度條百分比，0~100 |
| float getPercentage() | 獲取進度條百分比 |
| void setReverseProgress(bool reverse) -- C++ void setReverseDirection(bool value) -- lua |
設置反轉進度條的方向，如果true為順時針，如果 false為逆時針 |
| bool isReverseDirection() | 獲取方向是否為反轉狀態 |
| void setMidpoint(const Vec2& point) | 用於修改進度條的中點位置， 如果為RADIAL類型，中心則代表圓心位置 如果為BAR類型，中心則代表着進度條展開的方向，因此： 從左->右展開時，設置為Vec2(0,y) 從右->左展開時，設置為Vec2(1,y) 從下->上展開時，設置為Vec2(x,0) 從上->下展開時，設置為Vec2(x,1) |
| Vec2 getMidpoint() | 獲取中點位置 |
| void setBarChangeRate(const Vec2& barChangeRate ) | 設置BAR類型進度條非變化方向的顯示比例 |
| Vec2 getBarChangeRate() | 獲取BAR類型進度條變化的比例值 |
先看下示例：
實現方式第一種：
local barBgSpr = cc.Sprite:create("res/bar1.png") barBgSpr:setPosition(cc.p(winSize.width/2, winSize.height*5/6)) self:addChild(barBgSpr,1) local barSpr = cc.Sprite:create("res/bar2.png") -- 創建，注意其參數屬性只能為Sprite local processTimer = cc.ProgressTimer:create(barSpr) processTimer:setPosition(cc.p(winSize.width/2, winSize.height*5/6)) --[[ 設置進度類型，有兩種 PROGRESS_TIMER_TYPE_BAR：條形 PROGRESS_TIMER_TYPE_RADIAL: 徑向就是繞圓心，設置該模式后，就不用再設定
setBarChangeRate的屬性了 ]] processTimer:setType(cc.PROGRESS_TIMER_TYPE_BAR) --[[ 設置PROGRESS_TIMER_TYPE_BAR類型進度條變化率 cc.p(1,0) y=0表示豎向沒有變化 cc.p(0,1) x=0表示橫向沒有變化
該類型為橫向變化 ]] processTimer:setBarChangeRate(cc.p(1, 0)) processTimer:setMidpoint(cc.p(0, 0)) -- 設置進度條百分比 processTimer:setPercentage(0) self:addChild(processTimer,2) --[[ ProgressTo: 參數: 持續時間(秒)，進度(0~100) ProgressFromTo: 參數：持續時間(秒), 起始進度，結束進度 二者的區別在於： ProgressTo不可重復執行 ]] local action1 = cc.ProgressTo:create(5,100) local action1 = cc.ProgressFromTo:create(5,0,100) local action = cc.RepeatForever:create(action1) processTimer:runAction(action)
實現方式第二種：（模擬血條）
local barSpr = cc.Sprite:create("res/pu_hart.png") local processTimer = cc.ProgressTimer:create(barSpr) processTimer:setPosition(cc.p(winSize.width/2, winSize.height*4/6)) processTimer:setType(cc.PROGRESS_TIMER_TYPE_BAR) -- 設置豎向變化 processTimer:setBarChangeRate(cc.p(0, 1)) processTimer:setMidpoint(cc.p(0, 0)) processTimer:setPercentage(0) self:addChild(processTimer,2) local action1 = cc.ProgressFromTo:create(5,0,100) local action = cc.RepeatForever:create(action1) processTimer:runAction(action)
實現方式第三種：（模擬技能變化）
-- 技能框 local barBgSpr = cc.Sprite:create("res/111.png") barBgSpr:setPosition(cc.p(winSize.width/2, winSize.height*3/6)) self:addChild(barBgSpr,1) -- 技能(應該添加一個技能遮罩層的，但是沒有資源) local barSpr = cc.Sprite:create("res/222.png") local processTimer = cc.ProgressTimer:create(barSpr) processTimer:setPosition(cc.p(winSize.width/2, winSize.height*3/6)) -- 設置進度類型為徑向 processTimer:setType(cc.PROGRESS_TIMER_TYPE_RADIAL) processTimer:setPercentage(0) self:addChild(processTimer,2) local action1 = cc.ProgressFromTo:create(5,0,100) local action = cc.RepeatForever:create(action1) processTimer:runAction(action)
拓展：針對於實現方式第一種，也可以通過時間調度器來控制，我們使用LoadingBar來編寫示例，如下：
-- 進度條 self._loadingBar = ccui.LoadingBar:create() self._loadingBar:loadTexture("res/sliderProgress.png") self._loadingBar:setPosition(cc.p(winSize.width/2, winSize.height*2/6 - 95)) self._loadingBar:setDirection(ccui.LoadingBarDirection.LEFT) self._loadingBar:setPercent(0) self:addChild(self._loadingBar) local scheduler = cc.Director:getInstance():getScheduler() if self._timeScheduler ~= nil then scheduler:unscheduleScriptEntry(self._timeScheduler) self._timeScheduler = nil end -- 每0.1秒刷新 self._timeScheduler = scheduler:scheduleScriptFunc(function(delta) -- 判定當前的進度 local curpercent = self._loadingBar:getPercent() if curpercent < 100 then curpercent = curpercent + delta*10 self._loadingBar:setPercent(curpercent) else -- 如果進度 > 100 則重置 self._loadingBar:setPercent(0) end end, 0.1, false)
ProgressTo與ProgressFromTo的進度計算，可參考：
void ProgressTo::update(float time) { ((kProgressTimerCast)(_target))->setPercentage(_from + (_to - _from) * time); } // void ProgressFromTo::update(float time) { ((kProgressTimerCast)(_target))->setPercentage(_from + (_to - _from) * time); }
關於ProgressTimer的繪制可參考：
void ProgressTimer::onDraw(const Mat4 &transform, uint32_t flags)
其實現原理就是通過時間來計算Sprite的頂點vertex的位置而已。