通过认真学习，如果想要使用更多的进度条效果，我们应该去看cocos2d官方C++的demo，然后我们在用lua写

一、组件bar  目前写好了如下的效果。

代码如下：

  

   

    

     

    
    

     

      local LoginScene = class("LoginScene", function()
     
    
   

    

     

    
    

     

          return display.newScene("LoginScene")
     
    
   

    

     

    
    

     

      end)
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      function LoginScene:onInterval()
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      --实现一个进度条
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      --实现一个游客登录
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      end
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      function LoginScene:loadbar()
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      -- 创建并初始化进度,第一个参数是duration持续时间，100为进度  
     
    
   

    

     

    
    

     

        local to1 = cc.ProgressTo:create(2, 100)  
     
    
   

    

     

    
    

     

        local to2 = cc.ProgressTo:create(2, 100)  
     
    
   

    

     

    
    

     
  
     
    
   

    

     

    
    

     

        -- ProgressTimer是Node的子类。 该类根据百分比来渲染显示内部的Sprite对象。 变化方向包括径向，水平或者垂直方向。  
     
    
   

    

     

    
    

     

        local left1 = cc.ProgressTimer:create(cc.Sprite:create("dog.png"))  
     
    
   

    

     

    
    

     

        -- 设置进度计时的类型，这里是绕圆心  
     
    
   

    

     

    
    

     

        left1:setType(cc.PROGRESS_TIMER_TYPE_RADIAL)  
     
    
   

    

     

    
    

     

        -- 设置显示位置  
     
    
   

    

     

    
    

     

        left1:setPosition(cc.p(100, 100))  
     
    
   

    

     

    
    

     

        -- 运行动作  
     
    
   

    

     

    
    

     

        left1:runAction(cc.RepeatForever:create(to1))  
     
    
   

    

     

    
    

     

        -- 添加到层当中  
     
    
   

    

     

    
    

     

        left1:addTo(self) 
     
    
   

    

     

    
    

     
  
     
    
   

    

     

    
    

     

        -- 右边的方块  
     
    
   

    

     

    
    

     

        local right1 = cc.ProgressTimer:create(cc.Sprite:create("dog.png"))  
     
    
   

    

     

    
    

     

        -- 设置进度计时的类型  
     
    
   

    

     

    
    

     

        right1:setType(cc.PROGRESS_TIMER_TYPE_RADIAL)  
     
    
   

    

     

    
    

     

        -- Makes the ridial CCW  
     
    
   

    

     

    
    

     

        right1:setReverseDirection(true) -- 设置反向  
     
    
   

    

     

    
    

     

        -- 设置位置  
     
    
   

    

     

    
    

     

        right1:setPosition(cc.p(display.width - 100,display.height-100))  
     
    
   

    

     

    
    

     

        -- 运行动作，无限循环  
     
    
   

    

     

    
    

     

        right1:runAction(cc.RepeatForever:create(to2))  
     
    
   

    

     

    
    

     

        -- 添加到层当中  
     
    
   

    

     

    
    

     

        right1:addTo(self) 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

        -- 创建进度条  
     
    
   

    

     

    
    

     

        local to1 = cc.ProgressTo:create(2.5, 100)  
     
    
   

    

     

    
    

     

        local to2 = cc.ProgressTo:create(2, 100)  
     
    
   

    

     

    
    

     
  
     
    
   

    

     

    
    

     

        -- 创建进度条的动画渲染器  
     
    
   

    

     

    
    

     

        local left = cc.ProgressTimer:create(cc.Sprite:create("dog.png"))  
     
    
   

    

     

    
    

     

        -- 设置进度条类型，这里是条形进度类型  
     
    
   

    

     

    
    

     

        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, display.height / 2))  
     
    
   

    

     

    
    

     

        -- 执行动作  
     
    
   

    

     

    
    

     

        left:runAction(cc.RepeatForever:create(to1))  
     
    
   

    

     

    
    

     

        -- 添加到层中  
     
    
   

    

     

    
    

     

        left:addTo(self) 
     
    
   

    

     

    
    

     
    
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

        -- 进度条渲染器，这是右边演示的进度条  
     
    
   

    

     

    
    

     

        local right = cc.ProgressTimer:create(cc.Sprite:create("dog.png"))  
     
    
   

    

     

    
    

     

        -- 设置渲染类型  
     
    
   

    

     

    
    

     

        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(display.width - 100, display.height / 2))  
     
    
   

    

     

    
    

     

        -- 让它运行一个无限循环的进度动画，进度变化由控制器2来控制  
     
    
   

    

     

    
    

     

        right:runAction(cc.RepeatForever:create(to2))  
     
    
   

    

     

    
    

     

        right:addTo(self)  
     
    
   

    

     

    
    

     
  
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      end
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      function LoginScene:ctor()
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

          self:loadbar()
     
    
   

    

     

    
    

     

      end
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      function LoginScene:onEnter()
     
    
   

    

     

    
    

     

      end
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      function LoginScene:onExit()
     
    
   

    

     

    
    

     

      end
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      return LoginScene
     
    
  
 

二、点击增长

进度条其实也是比较简单的控件

详细的可以看UILoadingBar.h类中的实现

我们要是先如下的效果：

代码如下:

  

   

    

     

    
    

     

      function MenuScene:ctor()
     
    
   

    

     

    
    

     

          local x = 100
     
    
   

    

     

    
    

     

          local loadBar = ccui.LoadingBar:create("loading.png",x)
     
    
   

    

     

    
    

     

          :setPosition(display.width/2,display.height/2)
     
    
   

    

     

    
    

     

          :setCapInsets(cc.rect(0,0,10,10))
     
    
   

    

     

    
    

     

          :addTo(self)
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

        local btn = ccui.Button:create("button/btnDog_N.png", "button/btnDog_P.png", "button/btnDog_D.png", 0)  
     
    
   

    

     

    
    

     

              :pos(display.cx, 100)  
     
    
   

    

     

    
    

     

              :addTo(self)  
     
    
   

    

     

    
    

     

              --按钮文字  
     
    
   

    

     

    
    

     

              btn:setTitleText("按钮")  
     
    
   

    

     

    
    

     

              --按钮的回调函数  
     
    
   

    

     

    
    

     

              btn:addTouchEventListener(function(sender, eventType)  
     
    
   

    

     

    
    

     

              if (0 == eventType)  then  
     
    
   

    

     

    
    

     

                  print("pressed")  
     
    
   

    

     

    
    

     

                  x= x-10
     
    
   

    

     

    
    

     

                  loadBar:setPercent(x)
     
    
   

    

     

    
    

     

              end
     
    
   

    

     

    
    

     

          end)  
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      end
     
    
  
 

不会的话看C++文件其实很方便

文章来源: yujiang.blog.csdn.net，作者：鱼酱2333，版权归原作者所有，如需转载，请联系作者。

原文链接：yujiang.blog.csdn.net/article/details/78708934