Cocos2d-x 3.x进度条

ProgressTimer是cocos2d提供的进度条类。

基本概念

ProgressTimer派生自Node类，采用组合的方式管理一个Sprite对象。该类根据百分比来渲染显示内部的Sprite对象。变化方向包括径向，水平或者垂直方向。

属性

ProgressTimer对象默认 是径向，显示比例是0.0%，Midpoint(0.5,0.5)，barChangeRate（1.0，1.0）。

1 进度条类型
进度条的类型定义了进度条增长变化的方向：

• 径向
• 条形

2 Midpoint

• 中点（Midpoint）表示进度条变化的起始位置。
• 如果进度条是径向模式，中点代表圆心位置；如果进度条是条形模式，中点代表着进度条展开的方向， 进度条从中心位置向两边展开。
• 因此： 进度条从左往右展开时，设置中点（Midpoint）为Vec2(0,y); 进度条从右往左展开时，设置中点（Midpoint）为Vec2(1,y); 进度条从下往上展开时，设置中点（Midpoint）为Vec2(x,0); 进度条从上往下展开时，设置中点（Midpoint）为Vec2(x,1)。

3 barChangeRate

• 只对条形模式有影响，条形模式进度条非变化方向显示的比例（barChangeRate），设置为0可以保证进度条非变化方向100显示。
• 如果你需要一个从左往右的进度条，但是上下方向不需要100显示， 那么设置barChangeRate为Vec2(0,1),设置中点（Midpoint）为Vec2(0,.5f)。

基本API

• 设置用于进度条的精灵

static ProgressTimer* create(Sprite * sp);
void setSprite(Sprite * sprite);

• 设置进度条类型

void setType(Type   type);

• 设置中点

void setMidpoint(const Vec2 & point);

• 设置条形进度条的变化比例

void setBarChangeRate(const Vec2 &  barChangeRate);

• 反转进度条的方向：value 如果是 false，则为顺时针方向；否则为逆时针方向。

void setReverseDirection(bool value);   

示例

进度条可以使用两张图片，都放在同一个位置，一张图片按比例显示。

bool ProgressTimer_1::init()
{
    if (!Layer::init())
    {
        return false;
    }

    Size sz = Director::getInstance()->getVisibleSize();
    Vec2 center = Vec2(sz.width / 2, sz.height / 2);

    /* 白色桃心 */
    Sprite * white = Sprite::create("heart2.png");
    white->setPosition(center);
    white->setTag(1);
    this->addChild(white);

    /* 红色桃心由定时器控制 */
    Sprite * red = Sprite::create("heart1.png");
    ProgressTimer * prog = ProgressTimer::create(red);
    prog->setPosition(center);
    prog->setTag(2);
    prog->setType(ProgressTimer::Type::BAR);
    prog->setMidpoint(Vec2(0.5,0));
    prog->setBarChangeRate(Vec2(0,1));
    this->addChild(prog);


    this->schedule(SEL_SCHEDULE(&ProgressTimer_1::scheduleFunc), 1.f);

    return true;
}

void ProgressTimer_1::scheduleFunc(float dt)
{
    ProgressTimer * prog = dynamic_cast<ProgressTimer*>(getChildByTag(2));

    prog->setPercentage(prog->getPercentage() + 10);

    if (prog->getPercentage() >= 100)
    {
        unscheduleUpdate();
    }
}

结果：