Cocos2d-x 3.1.1 Lua演示樣例 ActionsProgressTest（進度條）

Cocos2d-x 3.1.1 Lua演示樣例 ActionsProgressTest（進度條）

 本篇博客介紹Cocos2d-x中的進度條動畫,進度條涉及如下幾個重要的類和方法，筆者來給你們具體解說一下：

  ProgressTo類：進度控制器，控制進度從當前進度變化到某個值。

事實上它就是一個動做。控制進度條變化。

  它的類繼承圖例如如下：

  ProgressTimer是Node的子類。

該類依據百分比來渲染顯示內部的Sprite對象。 變化方向包含徑向。水平或者垂直方向。

  ProgressFromTo:FromTo進度控制器，控制進度從一個指定值到還有一個值的變化.

   

  這裏有兩個方法多是你們比較疑惑的：

  left:setMidpoint(cc.p(0, 0))

  setMidpoint()函數是設置進度條的起始點，（0,y）表示最左邊，（1,,y）表示最右邊。（x,1）表示最上面，（x,0）表示最如下。

  right:setBarChangeRate(cc.p(1, 0))

 setBarChangeRate()函數是用來設置進度條動畫方向的，（1,0）表示橫方向，（0,1）表示縱方向

 如下筆者把樣例中的代碼貼出來。已經進行了具體的凝視，相應了每個進度動畫效果，若有疑問，可以留言或者加入筆者所建立的羣：299402133

-- 得到屏幕大小
local s = cc.Director:getInstance():getWinSize()

------------------------------------
--  SpriteProgressToRadial 繞圓心旋轉的進度條、
--  圓形進度動畫是一個繞中心將精靈邊緣掃描一圈在這個過程當中消失的動畫消果。

------------------------------------
local function SpriteProgressToRadial()
  -- 建立層
  local layer = cc.Layer:create()
  -- 初始化層
  Helper.initWithLayer(layer)
  -- 建立並初始化進度,第一個參數是duration持續時間。100爲進度
  local to1 = cc.ProgressTo:create(2, 100)
  local to2 = cc.ProgressTo:create(2, 100)

  -- ProgressTimer是Node的子類。 該類依據百分比來渲染顯示內部的Sprite對象。
 變化方向包含徑向，水平或者垂直方向。

  local left = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister1))
  -- 設置進度計時的類型，這裏是繞圓心
  left:setType(cc.PROGRESS_TIMER_TYPE_RADIAL)
  -- 設置顯示位置
  left:setPosition(cc.p(100, s.height / 2))
  -- 執行動做
  left:runAction(cc.RepeatForever:create(to1))
  -- 加入到層其中
  layer:addChild(left)

  -- 右邊的方塊
  local right = cc.ProgressTimer:create(cc.Sprite:create(s_pPathBlock))
  -- 設置進度計時的類型
  right:setType(cc.PROGRESS_TIMER_TYPE_RADIAL)
  -- Makes the ridial CCW
  right:setReverseDirection(true) -- 設置反向
  -- 設置位置
  right:setPosition(cc.p(s.width - 100, s.height / 2))
  -- 執行動做。無限循環
  right:runAction(cc.RepeatForever:create(to2))
  -- 加入到層其中
  layer:addChild(right)

  -- 設置標題
  Helper.subtitleLabel:setString("ProgressTo Radial")
  return layer
end

------------------------------------
--  SpriteProgressToHorizontal 條形的橫向進度動畫演示
------------------------------------
local function SpriteProgressToHorizontal()
  -- 建立層
  local layer = cc.Layer:create()
  -- 初始化層
  Helper.initWithLayer(layer)

  -- 建立進度條
  local to1 = cc.ProgressTo:create(2, 100)
  local to2 = cc.ProgressTo:create(2, 100)

  -- 建立進度條的動畫渲染器
  local left = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister1))
  -- 設置進度條類型。這裏是條形進度類型
  left:setType(cc.PROGRESS_TIMER_TYPE_BAR)
  -- 設置圓心位置爲左下角
  left:setMidpoint(cc.p(0, 0))
  -- 設置橫向進度條變化率。y=0意味着沒有豎向的變化
  left:setBarChangeRate(cc.p(1, 0))
  -- 設置在x=100,y爲屏幕寬度一半的位置
  left:setPosition(cc.p(100, s.height / 2))
  -- 執行動做
  left:runAction(cc.RepeatForever:create(to1))
  -- 加入到層中
  layer:addChild(left)

  -- 進度條渲染器。這是右邊演示的進度條
  local right = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister2))
  -- 設置渲染類型
  right:setType(cc.PROGRESS_TIMER_TYPE_BAR)
  -- Setup for a bar starting from the left since the midpoint is 1 for the x
  --  用來設定進度條橫向前進的方向從左向右或是從右向左。這裏是從右往左
  right:setMidpoint(cc.p(1, 0))
  -- Setup for a horizontal bar since the bar change rate is 0 for y meaning no vertical change
  -- 用來設置進度條增加按橫向或是按縱向增加，這裏是橫向增加
  right:setBarChangeRate(cc.p(1, 0))
  -- 設置渲染器到右邊
  right:setPosition(cc.p(s.width - 100, s.height / 2))
  -- 讓它執行一個無限循環的進度動畫，進度變化由控制器2來控制
  right:runAction(cc.RepeatForever:create(to2))
  layer:addChild(right)

  -- 標題
  Helper.subtitleLabel:setString("ProgressTo Horizontal")
  return layer
end

------------------------------------
--  SpriteProgressToVertical 縱向的條形進度動畫演示
------------------------------------
local function SpriteProgressToVertical()
  -- 建立層
  local layer = cc.Layer:create()
  -- 初始化層
  Helper.initWithLayer(layer)

  -- 建立兩個進度動畫的控制器.2秒進度值變化到100
  local to1 = cc.ProgressTo:create(2, 100)
  local to2 = cc.ProgressTo:create(2, 100)

  -- 建立進度條渲染器
  local left = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister1))
  -- 設置渲染器進度條類型
  left:setType(cc.PROGRESS_TIMER_TYPE_BAR)

  -- 設置進度起點在左下角
  left:setMidpoint(cc.p(0,0))
  -- 設置進度條橫向無變化，縱向變化
  left:setBarChangeRate(cc.p(0, 1))
  -- 設置渲染器的位置
  left:setPosition(cc.p(100, s.height / 2))
  -- 無限循環第一個動畫控制器
  left:runAction(cc.RepeatForever:create(to1))
  -- 加入渲染器到層中
  layer:addChild(left)

  -- 建立右邊的進度條渲染器
  local right = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister2))
  -- 設置渲染類型
  right:setType(cc.PROGRESS_TIMER_TYPE_BAR)
  -- 設置中心點在左上角
  right:setMidpoint(cc.p(0, 1))
  -- 設置進度條縱方向變化。橫方向不變化
  right:setBarChangeRate(cc.p(0, 1))
  -- 設置顯示位置
  right:setPosition(cc.p(s.width - 100, s.height / 2))
  -- 讓它執行一個無限循環的進度動畫。進度變化由控制器2來控制
  right:runAction(cc.RepeatForever:create(to2))
  layer:addChild(right)

  -- 設置子標題
  Helper.subtitleLabel:setString("ProgressTo Vertical")
  return layer
end

------------------------------------
--  SpriteProgressToRadialMidpointChanged
--  中點可改變的繞中點旋轉的進度動畫
------------------------------------
local function SpriteProgressToRadialMidpointChanged()
  -- 建立層
  local layer = cc.Layer:create()
  -- 初始化層
  Helper.initWithLayer(layer)

  -- 建立進度動畫控制器。2秒完畢100進度值
  local action = cc.ProgressTo:create(2, 100)

  -- 建立一個進度動畫的渲染器.使用塊色圖精靈來渲染
  local left = cc.ProgressTimer:create(cc.Sprite:create(s_pPathBlock))
  -- 設置表現爲繞圓心旋轉的進度動畫。

  left:setType(cc.PROGRESS_TIMER_TYPE_RADIAL)
  -- 設置旋轉的中心點在橫向靠左1/4位置，縱向靠上3/4位置
  left:setMidpoint(cc.p(0.25, 0.75))
  -- 設置渲染器的位置在屏幕左邊
  left:setPosition(cc.p(100, s.height / 2))
  -- 讓它執行一個無限循環的進度動畫，進度變化由action來控制
  left:runAction(cc.RepeatForever:create(action))
  layer:addChild(left)

  -- 建立一個進度動畫的渲染器.使用塊色圖精靈來渲染
  local right = cc.ProgressTimer:create(cc.Sprite:create(s_pPathBlock))
  -- 設置表現爲繞圓心旋轉的進度動畫。

  right:setType(cc.PROGRESS_TIMER_TYPE_RADIAL)
  -- 設置旋轉的中心點在橫向靠右3/4位置。縱向靠上1/4位置
  right:setMidpoint(cc.p(0.75, 0.25))

  --[[
  Note the reverse property (default=NO) is only added to the right image. That's how
  we get a counter clockwise progress.
  ]]
  right:setPosition(cc.p(s.width - 100, s.height / 2))
  right:runAction(cc.RepeatForever:create(action))
  layer:addChild(right)

  -- 設置子標題
  Helper.subtitleLabel:setString("Radial w/ Different Midpoints")
  return layer
end

------------------------------------
--  SpriteProgressBarVarious
--
------------------------------------
local function SpriteProgressBarVarious()
  -- 建立層
  local layer = cc.Layer:create()
  -- 初始化層
  Helper.initWithLayer(layer)

  -- 建立進度動畫控制器，2秒完畢100進度值
  local to = cc.ProgressTo:create(2, 100)

  -- 建立進度動畫渲染器,使用女演員精靈來渲染
  local left = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister1))
  -- 設置表現爲條形的進度動畫
  left:setType(cc.PROGRESS_TIMER_TYPE_BAR)

  -- 設置起始位置在中間
  left:setMidpoint(cc.p(0.5, 0.5))
  -- 設置進度條橫向變化。縱向不變化
  left:setBarChangeRate(cc.p(1, 0))
  -- 設置到屏幕左邊
  left:setPosition(cc.p(100, s.height / 2))
  -- 讓它執行一個無限循環的進度動畫
  left:runAction(cc.RepeatForever:create(cc.ProgressTo:create(2, 100)))
  layer:addChild(left)

  local middle = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister2))
  middle:setType(cc.PROGRESS_TIMER_TYPE_BAR)
  -- 設置起始位置在中間
  middle:setMidpoint(cc.p(0.5, 0.5))
  -- 設置進度變化橫縱方向都有變化
  middle:setBarChangeRate(cc.p(1, 1))
  -- 設置精靈顯示在中間
  middle:setPosition(cc.p(s.width/2, s.height/2))
  -- 讓它執行一個無限循環的進度動畫
  middle:runAction(cc.RepeatForever:create(cc.ProgressTo:create(2, 100)))
  layer:addChild(middle)

  local right = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister2))
  -- 設置表現爲條形的進度動畫
  right:setType(cc.PROGRESS_TIMER_TYPE_BAR)
  -- 設置起始位置在中間
  right:setMidpoint(cc.p(0.5, 0.5))
  -- 設置進度條橫方向不變化，縱方向變化
  right:setBarChangeRate(cc.p(0, 1))
  -- 設置精靈的位置在右邊
  right:setPosition(cc.p(s.width-100, s.height/2))
  right:runAction(cc.RepeatForever:create(cc.ProgressTo:create(2, 100)))
  layer:addChild(right)

  -- 設置子標題
  Helper.subtitleLabel:setString("ProgressTo Bar Mid")
  return layer
end

------------------------------------
--  SpriteProgressBarTintAndFade
--  進度動畫之顏色，透明度的變化
------------------------------------
local function SpriteProgressBarTintAndFade()
  -- 建立層
  local layer = cc.Layer:create()
  -- 初始化層
  Helper.initWithLayer(layer)

  --  建立進度動畫控制器，6秒完畢100進度值
  local to = cc.ProgressTo:create(6, 100)
  -- 建立一個動畫序列，先是1秒內變化到紅色。再經1秒變化到綠色。最後1秒變化到藍色。

  local tint = cc.Sequence:create(cc.TintTo:create(1, 255, 0, 0), cc.TintTo:create(1, 0, 255, 0), cc.TintTo:create(1, 0, 0, 255))
  -- 建立一個動畫序列。先是1秒內透明度變化到0而消失。再經1秒變化到255顯現
  local fade = cc.Sequence:create(cc.FadeTo:create(1.0, 0),cc.FadeTo:create(1.0, 255))
  -- 建立進度動畫渲染器,使用女演員精靈來渲染
  local left = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister1))
  -- 設置表現爲條形的進度動畫
  left:setType(cc.PROGRESS_TIMER_TYPE_BAR)

  -- 設置起始位置在中間
  left:setMidpoint(cc.p(0.5, 0.5))
  -- 設置進度條橫方向不變化。縱方向變化
  left:setBarChangeRate(cc.p(1, 0))
  -- 設置在左邊
  left:setPosition(cc.p(100, s.height / 2))
  -- 執行動做。6秒完畢100進度值
  left:runAction(cc.RepeatForever:create(cc.ProgressTo:create(6, 100)))
  -- 執行動做，先是1秒內變化到紅色，再經1秒變化到綠色，最後1秒變化到藍色
  left:runAction(cc.RepeatForever:create(cc.Sequence:create(cc.TintTo:create(1, 255, 0, 0), cc.TintTo:create(1, 0, 255, 0), cc.TintTo:create(1, 0, 0, 255))))
  layer:addChild(left)

  -- 加入標籤
  left:addChild(cc.Label:createWithTTF("Tint", "fonts/Marker Felt.ttf", 20.0))

  --  建立進度動畫渲染器,使用女演員精靈來渲染
  local middle = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister2))
  -- 設置表現爲條形的進度動畫
  middle:setType(cc.PROGRESS_TIMER_TYPE_BAR)
  -- 設置起始位置在中間
  middle:setMidpoint(cc.p(0.5, 0.5))
  -- 設置進度條橫方向不變化，縱方向變化
  middle:setBarChangeRate(cc.p(1, 1))
  -- 設置顯示位置到中間
  middle:setPosition(cc.p(s.width / 2, s.height / 2))
  -- 執行動做。6秒完畢100進度值
  middle:runAction(cc.RepeatForever:create(cc.ProgressTo:create(6, 100)))

  -- 建立淡入淡出的動畫
  local fade2 = cc.Sequence:create(cc.FadeTo:create(1.0, 0), cc.FadeTo:create(1.0, 255))
  middle:runAction(cc.RepeatForever:create(fade2))
  layer:addChild(middle)

  -- 加入標籤
  middle:addChild(cc.Label:createWithTTF("Fade", "fonts/Marker Felt.ttf", 20.0))

  --  建立進度動畫渲染器,使用女演員精靈來渲染
  local right = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister2))
  -- 設置表現爲條形的進度動畫
  right:setType(cc.PROGRESS_TIMER_TYPE_BAR)
  -- 設置起始位置在中間
  right:setMidPoint(cc.p(0.5, 0.5))
  -- 設置進度條橫方向不變化，縱方向變化
  right:setBarChangeRate(cc.p(1, 1))
  -- 設置位置在右邊
  right:setPosition(cc.p(s.width - 100, s.height / 2))
  --執行動做，6秒完畢100進度值
  right:runAction(cc.RepeatForever:create(cc.ProgressTo:create(6, 100)))
  -- 先是1秒內變化到紅色，再經1秒變化到綠色，最後1秒變化到藍色
  right:runAction(cc.RepeatForever:create(cc.Sequence:create(cc.TintTo:create(1, 255,0,0), cc.TintTo:create(1, 0,255,0), cc.TintTo:create(1, 0,0,255))))
  -- 建立淡入淡出的動畫
  right:runAction(cc.RepeatForever:create(cc.Sequence:create(cc.FadeTo:create(1.0, 0), cc.FadeTo:create(1.0, 255))))
  layer:addChild(right)

  -- 加入標籤
  right:addChild(cc.Label:createWithTTF("Tint and Fade", "fonts/Marker Felt.ttf", 20.0))

  -- 設置子標籤
  Helper.subtitleLabel:setString("ProgressTo Bar Mid")
  return layer
end

------------------------------------
--  SpriteProgressWithSpriteFrame
--  進度動畫之使用序列幀中的單幀精靈來演示
------------------------------------
local function SpriteProgressWithSpriteFrame()
  -- 建立層
  local layer = cc.Layer:create()
  -- 初始化層
  Helper.initWithLayer(layer)

  local to = cc.ProgressTo:create(6, 100)
  -- 建立進度動畫的控制器.6秒進度值變化到100
  cc.SpriteFrameCache:getInstance():addSpriteFrames("zwoptex/grossini.plist")
  -- 建立一個進度動畫渲染器，使用序列幀中的grossini_dance_01.png圖像來進行動畫的渲染
  local left = cc.ProgressTimer:create(cc.Sprite:createWithSpriteFrameName("grossini_dance_01.png"))
  -- 設置表現爲條形的進度動畫
  left:setType(cc.PROGRESS_TIMER_TYPE_BAR)
  -- 設置起始位置爲中點
  left:setMidpoint(cc.p(0.5, 0.5))
  -- 設置進度條橫方向變化，縱方向不變化
  left:setBarChangeRate(cc.p(1, 0))
  -- 設置顯示在左邊
  left:setPosition(cc.p(100, s.height / 2))
  -- 執行動做。6秒完畢100進度值
  left:runAction(cc.RepeatForever:create(cc.ProgressTo:create(6, 100)))
  layer:addChild(left)

  -- 建立一個進度動畫渲染器，使用序列幀中的grossini_dance_02.png圖像來進行動畫的渲染
  local middle = cc.ProgressTimer:create(cc.Sprite:createWithSpriteFrameName("grossini_dance_02.png"))
  middle:setType(cc.PROGRESS_TIMER_TYPE_BAR)
  middle:setMidpoint(cc.p(0.5, 0.5))
  middle:setBarChangeRate(cc.p(1, 1))
  middle:setPosition(cc.p(s.width / 2, s.height / 2))
  middle:runAction(cc.RepeatForever:create(cc.ProgressTo:create(6, 100)))
  layer:addChild(middle)

  -- -- 建立一個進度動畫渲染器。使用序列幀中的grossini_dance_03.png圖像來進行動畫的渲染
  local right = cc.ProgressTimer:create(cc.Sprite:createWithSpriteFrameName("grossini_dance_03.png"))
  right:setType(cc.PROGRESS_TIMER_TYPE_BAR)
  -- Setup for a bar starting from the bottom since the midpoint is 0 for the y
  right:setMidpoint(cc.p(0.5, 0.5))
  -- Setup for a vertical bar since the bar change rate is 0 for x meaning no horizontal change
  right:setBarChangeRate(cc.p(0, 1))
  right:setPosition(cc.p(s.width - 100, s.height / 2))
  right:runAction(cc.RepeatForever:create(cc.ProgressTo:create(6, 100)))
  layer:addChild(right)

  Helper.subtitleLabel:setString("Progress With Sprite Frame")
  return layer
end

function ProgressActionsTest()
  -- 建立一個場景
  local scene = cc.Scene:create()

  -- 建立方法表
  Helper.createFunctionTable = {
    SpriteProgressToRadial,
    SpriteProgressToHorizontal,
    SpriteProgressToVertical,
    SpriteProgressToRadialMidpointChanged,
    SpriteProgressBarVarious,
    SpriteProgressBarTintAndFade,
    SpriteProgressWithSpriteFrame
  }

  -- 加入
  scene:addChild(SpriteProgressToRadial())
  -- 加入返回菜單
  scene:addChild(CreateBackMenuItem())

  -- 切換場景
  cc.Director:getInstance():replaceScene(scene)
end