cocos2d-x进度条CCProgressTimer详解

概述参考文章 【1】http://blog.csdn.net/tskyfree/article/details/8223470 【2】http://shahdza.blog.51cto.com/2410787/1546707 CCProgressTimer就是拿一张CCSprite精灵图片来作为进度条，然后根据一个百分比属性，实现显示/隐藏图片的一部分区域，达到图形化显示进度的作用。 进度条有两种样式 参考文章

【1】http://blog.csdn.net/tskyfree/article/details/8223470

【2】http://shahdza.blog.51cto.com/2410787/1546707

CCProgresstimer就是拿一张CCSprite精灵图片来作为进度条，然后根据一个百分比属性，实现显示/隐藏图片的一部分区域，达到图形化显示进度的作用。
进度条有两种样式：扇形进度条、条形进度条。默认锚点（0.5,0.5）。

【一】创建CCProgresstimer

创建代码很简单

      CCSprite *sp=CCSprite::create("Icon-144.png");     timm=CCProgresstimer::create(sp);//创建CCProgresstimer     timm->setposition(400, 300);//设置CCProgresstimer位置     timm->setType(kCCProgresstimerTypebar);//设置类型     timm->setPercentage(0);//设置当前初始值     timm->setMIDpoint(CCPoint(0, 1));//设置进度开始的位置     timm->setbarChangeRate(CCPoint(1, 0));//设置进度所占比例     addChild(timm);//添加到 layer  

【二】属性解释

最重要的三个属性就是 Type ， MIDpoint ，barChangeRate

（1）首先是 Type

以前的时候cocos 给出了几个具体的类型，但是现在只有两种类型，这个主要就是显示的类型，是横竖着显示还是旋转着显示。

      typedef enum     {     kCCProgresstimerTypeRadial,//扇形     kCCProgresstimerTypebar,//条形     } CCProgresstimerType;  

（2）MIDPoint

就是进度开始的位置，默认是（0.5,0.5），就是从哪开始，一般如果你是选择的比如加载资源的从左到右进度条，那么可以选择(0,0.5)，或者(0,1)，这个主要是看下面的 barChangeRate 这个属性的

（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轴都已显示一半）  

进度条的显示方式主要受三个设置的影响：

（1）setType ：扇形、条形进度条。

（2）setMIDpoint ：中心位置。

（3）setbarChangeRate：用作条形进度条显示的图片所占比例。 其中（1）的设置决定了进度条的类型。

而（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从上到下显示"  

【三】进度条的变化

进度条显示进度主要是setPercentage显示现在的百分比，这个可以自己写函数实现百分比的增长，比如最简单的在 update 里面写一个增加的函数就行

      voID HelloWorld::update(float t)    {     timm->setPercentage(timm->getPercentage()+0.1);    }  

【四】setReverseProgress：逆向显示

就像开篇说的，CCProgresstimer就是拿一张CCSprite精灵图片来作为进度条，然后根据一个百分比属性，实现显示图片的一部分区域，如果调用这个逆向显示的函数，那就是按百分比隐藏图片。

正常效果

逆向显示效果

【五】CCProgressto和CCProgressFromTo

上面已经介绍完毕，这里说两个是 timer 的动作。

正常的显示百分比就是按照上面第三条的进度条的变化，调用函数改变进度条，而如果调用这两个动作的话，就不需要调用函数改变进度条，timer 就会自己执行这个动作，自动增加进度条的显示。

比如这样：

      CCProgressFromTo *from=CCProgressFromTo::create(6, 10, 70);     timm->runAction(from);  

那么他不改变百分比，就也会增加进度条，就相当于修改百分比执行的效果

Demo 示例：链接: http://pan.baidu.com/s/16RrbC 密码: e2ik

---

本文由胡东东博客整理,转载请注明本文标题和链接
本文标题: 《cocos2d-x进度条CCProgressTimer详解》
本文链接: http://hudongdong.com/cocos2d/125.html

总结

以上是内存溢出为你收集整理的cocos2d-x进度条CCProgressTimer详解全部内容，希望文章能够帮你解决cocos2d-x进度条CCProgressTimer详解所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。