cocos 進度條動畫

參考: cocos2d 3.10 Demo中的 ActionProgressTest

其進度條動畫，咱們主要使用的類有： 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類型進度條變化的比例值

 

示例的LuaDemo:

先看下示例：

實現方式第一種：

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的位置而已。

 

參考：http://www.javashuo.com/article/p-ohpyqmoi-ce.html