Cocos2d-x 3.1.1 Lua示例 ActionsProgressTest（进度条）

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› LUA›LUA教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

https://blog.csdn.net/wwj_748/article/details/37819787

本篇博客介绍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

[javascript]view plain copy
-- 获得屏幕大小  
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()  
  -- 创建层  





鲜花




握手




雷人




路过




鸡蛋