ProgressTimer制作技能冷却效果

ProgressTimer有RADIAL，BAR两种类型，RADIAL类型可以用来制作技能冷却效果。首先将一个Sprite通过setOpacity变暗，然后将ProgressTimer放置在Sprite的上方覆盖，第一眼看到的效果是一个完全灰暗的图片，然后ProgressTimer的Percentage从0到100的过程中，灰暗的部分越来越小，明亮的部分越来越大，就形成了技能正在冷却中的效果。代码如下：

1.C++版

#include "2d/CCProgressTimer.h"

class HelloWorld : public cocos2d::Layer
{
private:
    cocos2d::ProgressTimer* timer;
    cocos2d::ProgressTo* to;
    void playOver();
};

bool HelloWorld::init()
{
    Sprite* sp = Sprite::create("res/skill.png");
    sp->setOpacity(150);
    sp->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
    addChild(sp);

    timer = ProgressTimer::create(Sprite::create("res/skill.png"));
    timer->setType(cocos2d::ProgressTimer::Type::RADIAL);
    timer->setPosition(sp->getPosition());
    addChild(timer);

    to = ProgressTo::create(1.5f, 100.0f);
    timer->runAction(Sequence::create(to,CallFunc::create(CC_CALLBACK_0(HelloWorld::playOver, this)), NULL));

    return true;
}

void HelloWorld::playOver()
{
    log("play over");
    timer->setPercentage(0.0f);
    timer->runAction(Sequence::create(to,CallFunc::create(std::bind(&HelloWorld::playOver,this)), NULL));
}

2.Lua版

local MainScene = class("MainScene", cc.load("mvc").ViewBase)

function MainScene:ctor()
    local size = cc.Director:getInstance():getWinSize()
    local sp = cc.Sprite:create('res/skill.png')
    sp:setOpacity(150)
    sp:setPosition(size.width/2,size.height/2)
    self:addChild(sp)

    self.timer = cc.ProgressTimer:create(cc.Sprite:create('res/skill.png'))
    self.timer:setType(cc.PROGRESS_TIMER_TYPE_RADIAL)
    self.timer:setPosition(sp:getPosition())
    self:addChild(self.timer)

    self.to = cc.ProgressTo:create(1.5,100)
    local seq = cc.Sequence:create(self.to,cc.CallFunc:create(function()
        self:playOver()
    end))
    self.timer:runAction(seq)
end

function MainScene:playOver()
    self.timer:setPercentage(0)
    local seq = cc.Sequence:create(self.to,cc.CallFunc:create(function()
        self:playOver()
    end))
    self.timer:runAction(seq)
end

return MainScene

运行效果：