转载：http://www.jb51.cc/article/p-fgiwvqmz-br.html

可以说，进度条是游戏中特别常用的一个控件，大部分游戏都会需要用到资源加载条，技能道具的cd，或者是时间条。最近特别喜欢看底层，自我感觉底层是一个让人熟悉整个框架的特别好的方式，这次就来看下进度条的底层，感受一下。

class CC_DLL ProgressTimer : public Node  
#ifdef EMSCRIPTEN,public GLBufferedNode  
#endif // EMSCRIPTEN  
{  
public:  
    /** Types of progress 
     @since v0.99.1 
     */  
    enum class Type//进度条类型枚举，顾名思义，radial是圆形增减的进度条，bar是单方向增减的进度条 {  
        /// Radial Counter-Clockwise 
        RADIAL,/// Bar 
        BAR,};  

    /** Creates a progress timer with the sprite as the shape the timer goes through */  
    static ProgressTimer* create(Sprite* sp);//通过精灵去创建该对象 

    /** Change the percentage to change progress. */  
    inline Type getType() const { return _type; }//返回进度条类型 

    /** Percentages are from 0 to 100 */  
    inline float getPercentage() const {return _percentage; }//返回当前显示部分的百分值 

    /** The image to show the progress percentage,retain */  
    inline Sprite* getSprite() const { return _sprite; }  
   //设置当前显示部分的百分值，精灵，类型 
   void setPercentage(float percentage);   
   void setSprite(Sprite *sprite);   
   void setType(Type type);   
/** * @js setReverseDirection * @lua setReverseDirection */  
    void setReverseProgress(bool reverse);//设置进度条的方向，圆形增减类型有效，设置顺时针和逆时针 
   inline bool isReverseDirection() { return _reverseDirection; };  
   inline void setReverseDirection(bool value) { _reverseDirection = value; };  
/** * Midpoint is used to modify the progress start position. * If you're using radials type then the midpoint changes the center point * If you're using bar type the the midpoint changes the bar growth * it expands from the center but clamps to the sprites edge so: * you want a left to right then set the midpoint all the way to Point(0,y) * you want a right to left then set the midpoint all the way to Point(1,y) * you want a bottom to top then set the midpoint all the way to Point(x,0) * you want a top to bottom then set the midpoint all the way to Point(x,1) */  
    /** 根据注释可知，setmidPoint是设置进度条的圆心点，即开始位置，默认都是图片的中心位置，如果是圆形的，那么改变中心点，如果是bar型的，那么改变的是它的增长点 */  
        void setMidpoint(const Point& point);  
 /** Returns the Midpoint */ Point getMidpoint() const; /** * This allows the bar type to move the component at a specific rate * Set the component to 0 to make sure it stays at 100%. * For example you want a left to right bar but not have the height stay 100% * Set the rate to be Point(0,1); and set the midpoint to = Point(0,.5f); */  
      /**根据注释可知，BarChangeRate是设置进度条方向，如果是圆形的，好像不用设置，如果是bar型的，那么改变的是它的增减方向，例如Point(0,1)表示从下到上，Point（1,0）表示的是从左到右，（1，1）表示四周往中间，这些都是默认的midpoint，此时都是中心点，如果要从上到下，那么设置barchangerate为（0，1），设置midpoint为（0，0），从右到左亦然。 */  
    inline void setBarChangeRate(const Point& barChangeRate ) { _barChangeRate = barChangeRate; }  
 /** Returns the BarChangeRate */   
      inline Point getBarChangeRate() const { return _barChangeRate; }   
      virtual void draw(Renderer *renderer,const kmMat4 &transform,bool transformUpdated) override;  
      virtual void setAnchorPoint(const Point& anchorPoint) override;   
      virtual void setColor(const Color3B &color) override;  
      virtual const Color3B& getColor() const override;  
      virtual void setOpacity(GLubyte opacity) override;  
      virtual GLubyte getOpacity() const override;  
 CC_CONSTRUCTOR_ACCESS: /** * @js ctor */ ProgressTimer(); /** * @js NA * @lua NA */  
      virtual ~ProgressTimer();  
 /** Initializes a progress timer with the sprite as the shape the timer goes through */  
       bool initWithSprite(Sprite* sp);  
 protected:   
      void onDraw(const kmMat4 &transform,bool transformUpdated);   
      Tex2F textureCoordFromAlphaPoint(Point alpha);  
      Vertex2F vertexFromAlphaPoint(Point alpha);   
void updateProgress(void);  
 void updateBar(void);  
 void updateRadial(void);  
 virtual void updateColor(void) override;   
Point boundaryTexCoord(char index);  
 Type _type;  
 Point _midpoint;  
 Point _barChangeRate;   
float _percentage;  
 Sprite *_sprite;  
 int _vertexDataCount;  
 V2F_C4B_T2F *_vertexData;  
 CustomCommand _customCommand;  
 bool _reverseDirection;  
private:  
 CC_DISALLOW_COPY_AND_ASSIGN(ProgressTimer);};

大致的参数也已经写完，然后分别来两种情况的例子：
从上到下bar类型

//time's background 
    spritetime1=Sprite::create("biao1.png");  
    spritetime1->setAnchorPoint(Point(0,1));  
    spritetime1->setPosition(Point(WinRect::LeftBottom().x+5+10,WinRect::Top().y-3-10-3));  
    this->addChild(spritetime1,6);  
    //time's value 
    auto spritetime2=Sprite::create("biao2.png");  
    progress=ProgressTimer::create(spritetime2);  
    progress->setAnchorPoint(Point(0,1));  
    progress->setType(cocos2d::ProgressTimer::Type::BAR);  
    progress->setPosition(Point(WinRect::LeftBottom().x+6+10,WinRect::Top().y-3-13-3));  
    //set began Point 
    progress->setMidpoint(Point(0,0));  
    progress->setBarChangeRate(Point(0,1));  
    progress->setPercentage(100);//value 
    this->addChild(progress,7);  
//显示当前时间的label，可忽略 
    Myinterface::getInstance()->setTime(m_itime);  
    auto str = __String::createWithFormat("%f",m_itime);  
    numsTTF=Label::createWithSystemFont("0","Thonburi",24);  
    numsTTF->setString(str->getCString());  
    numsTTF->setAnchorPoint(Point(0,1));  
    numsTTF->setPosition(Point(WinRect::LeftBottom().x+150,WinRect::Top().y-15-10));  
    numsTTF->setColor(Color3B::BLACK);  
    this->addChild(numsTTF,8);  
    numsTTF->setVisible(true);

顺时针radial类型：

Sprite*sprite;  
    sprite=Sprite::createWithSpriteFrameName("black.png");  
    auto boomprogress=ProgressTimer::create(sprite);  
    boomprogress->setTag(type);  
    boomprogress->setType(cocos2d::ProgressTimer::Type::RADIAL);  
    boomprogress->setAnchorPoint(Point(0.5,0.5));  
    boomprogress->setPosition(p);  
    this->addChild(boomprogress,7);  
    boomprogress->setReverseProgress(true);  
    //action 
    auto to = ProgressFromTo::create(10,100,0);//十秒内从100走到0 
    auto pCall_N = CallFuncN::create(CC_CALLBACK_1(gameScene::maskcallback,this));//走完之后来个回调函数，这里我是用来当做技能cd 
    auto pSequeue = Sequence::create(to,pCall_N,NULL);  
    boomprogress->runAction(pSequeue);