当前位置：首页 > news >正文

cocos2d-lua：进度条ProgressTimer的使用

news 来源：原创 2024/7/7 17:09:03

ProgressTimer

条形进度条

圆形进度条

ProgressTimer

在Cocos2d-x中，进度条ProgressTimer分为两种：圆形（RADIAL）和条形（BAR），使用方法setType进行类型设置！

关于ProgressTimer的方法可以直接查看官网API或在引擎中找到CCProgressTimer.cpp文件查看源码！

下面介绍一下在Cocos2d-lua中ProgressTimer的使用方法：

条形进度条

local barProBg = cc.Sprite:createWithSpriteFrameName("bar_progress_bg.png")  -- 条形进度条背景，若不需要可以省去
local sprite = cc.Sprite:createWithSpriteFrameName("bar_pregress.png")
self.barPro = cc.ProgressTimer:create(sprite)  -- 必须使用精灵创建进度条
--[[
    setType：设置进度条类型
    cc.PROGRESS_TIMER_TYPE_RADIAL为圆形
    cc.PROGRESS_TIMER_TYPE_BAR为条形
]]
self.barPro:setType(cc.PROGRESS_TIMER_TYPE_BAR)
--[[
    setMidpoint：设置进度条的起点位置：cc.p(x, y)
    cc.p(0, 0)为左下角
    cc.p(1, 1)为右上角
    e.g.
    cc.p(0, y)：x为0，不管y为0还是1，水平方向的起点为最左边，则进度条减少的方向为从右到左
    cc.p(x, 1)：y为1，不管x为0还是1，垂直方向的起点为最上边，则进度条减少的方向为从下到上
]]
self.barPro:setMidpoint(cc.p(0, 0))
--[[
    setBarChangeRate：设置垂直和水平方向的进度：cc.p(x, y)
    x和y分别为水平方向和垂直方向，其值均为0或1，0表示该方向没有进度，1表示该方向有进度
    e.g.
    cc.p(1, 0)表示水平方向有进度，垂直方向无进度
    cc.p(1, 1)表示水平和垂直方向都有进度
]]
self.barPro:setBarChangeRate(cc.p(1, 0))
local size = barProBg:getContentSize()
self.barPro:setPosition(cc.p(size.width/2, size.height/2))
barProBg:addChild(self.barPro)
self.barPro:setPercentage(66)  -- 设置进度：0-100

ps：

setMidpoint和setBarChangeRate共同确定条形进度条的显示类型！

圆形进度条

local radialProBg = cc.Sprite:createWithSpriteFrameName("radial_progress_bg.png")  -- 圆形进度条背景，若不需要可以省去
local sprite = cc.Sprite:createWithSpriteFrameName("radial_pregress.png")
self.radialPro = cc.ProgressTimer:create(sprite)  -- 必须使用精灵创建进度条
--[[
    setType：设置进度条类型
    cc.PROGRESS_TIMER_TYPE_RADIAL为圆形
    cc.PROGRESS_TIMER_TYPE_BAR为条形
]]
self.radialPro:setType(cc.PROGRESS_TIMER_TYPE_RADIAL)
--[[
    setReverseDirection：设置进度条的方向（只针对圆形进度条）
    true为顺时针
    false为逆时针
]]
self.radialPro:setReverseDirection(true)
local size = radialProBg:getContentSize()
self.radialPro:setPosition(cc.p(size.width/2, size.height/2))
radialProBg:addChild(self.radialPro)
self.radialPro:setPercentage(66)  -- 设置进度：0-100