Cocos2d 进度条ProgressTimer

Cocos中进度条有两种形式，条形进度条，扇形进度条、。默认锚点（0.5,0.5）

一，条形进度条

如图所示：

制作原理是两个条形的图片，一个为前景，另一个为背景，背景保持不动，而前景使用CCProgressTimer做成逐渐显示的进度条。

1.创建进度条

void Load::setProgressTimer()
{
	CCSprite*  loadBg = CCSprite::create("LoadLayer/sliderTrack.png");
	CCSprite* loadFore = CCSprite::create("LoadLayer/sliderProgress.png");
	loadBg->setPosition(ccp(240, 60));
	addChild(loadBg);
	timer = CCProgressTimer::create(loadFore);                 //创建CCProgresstimer
	timer->setPosition(ccp(240, 60));					//设置CCProgressTimer位置
	timer->setType(kCCProgressTimerTypeBar);                //设置类型
	timer->setPercentage(0);						//设置当前初始值
	timer->setMidpoint(CCPoint(0, 1));				//设置进度开始的位置
	timer->setBarChangeRate(CCPoint(1, 0));     		//设置进度所占的比例
	addChild(timer);                                        			//添加到layer
}

2.属性设置

上述代码中所涉及到的三种属性，Type, Midpoint, BarChangeRete

 1）Type 设置条形还是扇形

typedef enum
 {
    kCCProgressTimerTypeRadial,		//扇形
    kCCProgressTimerTypeBar,		//条形
 } CCProgressTimerType;

2）MidPoint

进度条的开始位置，默认是（0.5， 0.5），就是从哪开始，上述代码中，从左往右，可以选择（0， 1）或者（0， 0.5），这个主要看BaChangeRete这个属性

3）BarChangeRate

setbarChangeRate使用于设置条形进度条所占的图片比例，对于扇形是无效的。也就是说拿出图片的多少比例作为进度条

setBarChangeRate( ccp(1,0) )    :  //只有X轴变化。 （起始X轴不显示）
setBarChangeRate( ccp(0,1) )    :  //只有Y轴变化。 （起始Y轴不显示）setBarChangeRate( ccp(1,1) )    :  //X，Y轴都变化。（起始X，y轴都不显示） 
setBarChangeRate( ccp(0.5,0.5) ):  //X，Y轴都变化。（起始X，y轴都已显示一半）

2）， 3）的配合使用可以有多种不同的显示方式

//当条形进度条样式为：setBarChangeRate( ccp(1,0) )
        ccp(1,0):        "从右到左显示"
        ccp(0.5,0):      "从中间到两边显示"
        ccp(0,0):        "从左到右显示"
    //当条形进度条样式为：setBarChangeRate( ccp(0,1) )
        ccp(0,1):        "从上到下显示。"
        ccp(0,0.5):      "从中间到两边显示。
        ccp(0,0):        "从下到上显示。"
    //当条形进度条样式为：setBarChangeRate( ccp(1,1) )
        ccp(0,1):        "X从左到右显示，    Y从上到下显示"
        ccp(0,0.5):      "X从左到右显示，    Y从中间到两边显示"
        ccp(1,0):        "X从右到左显示，    Y从下到上显示"
        ccp(0.5,0):      "X从中间到两边显示，Y从下到上显示"
        ccp(0,0):        "X从左到右显示，    Y从下到上显示"
        ccp(0.5,0.5):    "X从中间到两边显示，Y从中间到两边显示"
        ccp(1,1):        "X从右到左显示，    Y从上到下显示"

3.让进度条产生变化

在init函数中调用scheduleUpdate(),重写update方法，

void Load::update(float dt)
{
	timer->setPercentage(timer->getPercentage() + 0.2);
}

我们的条形进度条就大功告成了