使用ProgressTimer实现一些简单的效果

程序实例：ProgressTimer 实现效果 1

步骤 1：添加图片资源

首先，在工程目录下的 Resource 文件夹中添加两张图片，这两张图片将分别作为背景和进度条的显示内容。

步骤 2：定义 Progress 类

Progress.h 文件

在 Progress.h 文件中添加以下代码，用于声明 Progress 类：

#ifndef _Progress_H_
#define _Progress_H_
#include "cocos2d.h"
USING_NS_CC;

class Progress : public CCLayer
{
public:
static CCScene* scene();
bool init();
CREATE_FUNC(Progress);
void scheduleFunc(float dt);
};

#endif

上述代码中，Progress 类继承自 CCLayer，定义了 scene 静态方法用于创建场景，init 方法用于初始化，CREATE_FUNC 宏用于创建 Progress 对象，scheduleFunc 方法用于定时器回调。

Progress.cpp 文件

在 Progress.cpp 文件中添加以下代码，实现 Progress 类的具体功能：

#include "Progress.h"

CCScene* Progress::scene()
{
CCScene* scene = CCScene::create();
Progress* layer = Progress::create();
scene->addChild(layer);
return scene;
}

bool Progress::init()
{
CCLayer::init();
CCSize winSize = CCDirector::sharedDirector()->getWinSize();
CCPoint center = ccp(winSize.width / 2, winSize.height / 2);

// 创建背景精灵
CCSprite* bg = CCSprite::create("2.png");
bg->setPosition(center);
addChild(bg);

// 创建进度条精灵
CCSprite* sprite = CCSprite::create("1.png");
CCProgressTimer* progress = CCProgressTimer::create(sprite);
progress->setPosition(center);
addChild(progress);

// 设置进度条的模式为条形模式
progress->setType(kCCProgressTimerTypeBar);

// 设置进度条变化的方向，沿着 y 轴变化
progress->setBarChangeRate(ccp(0, 1));

// 设置进度条的起始位置为下面
progress->setMidpoint(ccp(0, 0));

// 设置进度条的 ID
progress->setTag(100);

// 创建一个定时器，每 0.1 秒调用一次 scheduleFunc 方法
schedule(schedule_selector(Progress::scheduleFunc), 0.1f);

return true;
}

void Progress::scheduleFunc(float dt)
{
// 通过进度条的 ID 得到进度条
CCProgressTimer* progress = (CCProgressTimer*)getChildByTag(100);

// 设置 progress 的进度，每调用一次进度加一
progress->setPercentage(progress->getPercentage() + 1);

// 当进度大于或者等于 100 时，终止定时器
if (progress->getPercentage() >= 100)
{
unscheduleAllSelectors();
}
}

执行结果

上述代码实现了一个简单的进度条效果，进度条会从下往上逐渐填充，当进度达到 100% 时，定时器停止。

另一种实现效果

Progress.cpp 文件

在 Progress.cpp 文件中添加以下代码，实现另一种进度条效果：

#include "Progress.h"

CCScene* Progress::scene()
{
CCScene* scene = CCScene::create();
Progress* layer = Progress::create();
scene->addChild(layer);
return scene;
}

bool Progress::init()
{
CCLayer::init();

// 设置背景颜色为白色
CCLayerColor* layer = CCLayerColor::create(ccc4(255, 255, 255, 255));
addChild(layer);

CCSize winSize = CCDirector::sharedDirector()->getWinSize();
CCPoint center = ccp(winSize.width / 2, winSize.height / 2);

// 创建背景精灵
CCSprite* bg = CCSprite::create("4.png");
bg->setPosition(center);
addChild(bg);

// 创建进度条精灵
CCSprite* sprite = CCSprite::create("3.png");
CCProgressTimer* progress = CCProgressTimer::create(sprite);
progress->setPosition(center);
addChild(progress);

// 设置进度条的 ID
progress->setTag(100);

// 创建一个定时器，每 0.1 秒调用一次 scheduleFunc 方法
schedule(schedule_selector(Progress::scheduleFunc), 0.1f);

return true;
}

void Progress::scheduleFunc(float dt)
{
// 通过进度条的 ID 得到进度条
CCProgressTimer* progress = (CCProgressTimer*)getChildByTag(100);

// 设置 progress 的进度，每调用一次进度加一
progress->setPercentage(progress->getPercentage() + 1);

// 当进度大于或者等于 100 时，终止定时器
if (progress->getPercentage() >= 100)
{
unscheduleAllSelectors();
}
}

执行结果

此代码实现了另一种进度条效果，背景颜色为白色，进度条会逐渐填充，当进度达到 100% 时，定时器停止。

通过上述两个实例，我们可以看到如何使用 CCProgressTimer 类来实现简单的进度条效果，并且可以通过定时器控制进度条的增长。