【嘮叨】
哎，周圍的同學都在搞cocos2dx 3.X了，而我還在用2.2.3。沒辦法，網上3.X的教程畢竟很少，還是等我的同學學得差不多了，我再換成3.X跟着同學搞，哪裏不會問哪裏。
本節主要來講講進度條CCProgressTimer，相信大家也不會陌生的吧。如安裝軟件時顯示的進度、遊戲中人物的HP、MP顯示的百分比橫條。
【致謝】
http://gl.paea.cn/contents/2260d48c5e2bc83d.html
【Demo下載】
【3.x】
（1）去掉 “CC”
（2）CCProgressTimerType 改爲強枚舉 ProgressTimer::Type::
|
1
2
3
4
|
// RADIAL //扇形進度計時器 BAR //條形進度計時器// |
（3）其他變化不大。
【CCProgressTimer】
1、進度動作CCProgressTo、CCProgressFromTo
在講解進度條CCProgressTimer之前，先講講和進度條有半毛線關係的兩個動作類：
（1）CCProgressTo （2）CCProgressFromTo
爲什麼在之前的基本動作CCAction那章不介紹，而放在這裏進行介紹呢？這是因爲，這兩個動作只是針對CCProgressTimer而言的，對其他的CCNode子類（如：CCSprite）沒啥用處。
從這兩個動作的字面上，也可以看出他們的用處了吧？就是進度條的進度從 a% 變化到 b% 。
使用方法如下：
|
1
2
3
4
5
6
7
|
// //幾秒內從0%變化到指定進度 CCProgressTo::create('時間', '變化到百分之幾'); //幾秒內從a%進度變化到b%進度 CCProgressFromTo::create('時間', '從百分之幾', '變化到百分之幾');// |
2、CCProgressTimer
CCProgressTimer就是拿一張CCSprite精靈圖片來作爲進度條，然後根據一個百分比屬性，實現顯示/隱藏圖片的一部分區域，達到圖形化顯示進度的作用。
進度條有兩種樣式：扇形進度條、條形進度條。默認錨點（0.5,0.5）。
常用操作如下：
（1）創建方法
（2）設置精靈圖片、設置進度值、設置樣式
（3）設置開始的中心位置，設置用於做進度條的比例（這兩個比較抽象，需要單獨講解）
其中，有兩個函數比較抽象：setMidpoint、setBarChangeRate。由於語言組織能力太弱，所以後面我會用圖片來說明一下。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
//class CCProgressTimer : public CCNodeRGBA{/** *
創建方法 create */ //精靈圖片作爲進度條 CCProgressTimer::create(CCSprite* sp);/** *
屬性設置 *
setSprite , setPercentage , setType */ //設置進度條所使用的精靈圖片 void setSprite(CCSprite *pSprite); CCSprite* getSprite(); //設置進度百分值[0,100] void setPercentage(float fPercentage); float getPercentage(); //設置進度條樣式 //
kCCProgressTimerTypeRadial 扇形進度計時器 //
kCCProgressTimerTypeBar 條形進度計時器 void setType(CCProgressTimerType type); CCProgressTimerType getType(); //反進度顯示 //條形：從100到0。 //扇形：false順時針，true逆時針 void setReverseProgress(bool reverse);/** *
進度條設置 *
setMidpoint , setBarChangeRate */ //設置進度條起始的中心位置，範圍[0,1]（默認圖片中點ccp(0.5,0.5)） void setMidpoint(CCPoint); CCPoint getMidpoint(); //用於做進度條所佔的圖片比例 void setBarChangeRate(CCPoint); CCPoint getBarChangeRate();/** *
父類繼承 *
setAnchorPoint , setColor , setOpacity */ //設置錨點 void setAnchorPoint(CCPoint anchorPoint); //設置顏色 virtual void setColor(const ccColor3B& color); virtual const ccColor3B& getColor() const; //設置透明度 virtual void setOpacity(GLubyte opacity); virtual GLubyte getOpacity() const;};// |
3、setMidpoint
setMidpoint是用來設置進度條的起始中心位置的。
（1）對於扇形進度條：相當於“圓心”，從0到100，慢慢展開扇形。
（2）對於條形進度條：相當於從某點向兩邊擴散。
還是看圖吧，語言表達有限：
3、setBarChangeRate
setBarChangeRate是用於設置條形進度條所佔的圖片比例，對於扇形是無效的。
也就是說拿出圖片多少的比例作爲進度條。還是看圖吧，語言表達有限。
下列三組圖解中，黃顏色區域表示一開始就已經顯示的圖片區域。而ccp(x,y)：表示寬度還有
x 比例的圖片還未顯示，高度還有 y 比例的圖片還未顯示，用作顯示進度條。
有下圖可知，“進度百分值”是相對剩餘ccp(x,y)用作顯示進度條的那一部分，已經顯示的百分率，而不是整張圖片的百分率。
常用方式如下：
|
1
2
3
4
5
6
|
// 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軸都已顯示一半）// |
三組圖片對比圖：
4、常用的進度條方式
由上面的講解可以得出，進度條的顯示方式主要受三個設置的影響：
（1）setType ：扇形、條形進度條。
（2）setMidpoint ：中心位置。
（3）setBarChangeRate：用作條形進度條顯示的圖片所佔比例。
其中（1）的設置決定了進度條的類型。而（2）（3）的配合使用可以有多種不同的顯示方式。
常用的（2）（3）配合使用方式如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// //當條形進度條樣式爲：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從上到下顯示"// |
【代碼實戰】
1、資源圖片
2、創建兩類進度條：條形、扇形
並定義進度條顯示方式。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
// //條形進度條pro1 CCSprite* bg1 = CCSprite::create("Icon.png"); CCProgressTimer* pro1 = CCProgressTimer::create(bg1); pro1->setPosition( ccp(130, 100) ); this->addChild(pro1); //條形，定義進度條方式：從右到左顯示 pro1->setType(kCCProgressTimerTypeBar); pro1->setBarChangeRate( ccp(1, 0) ); pro1->setMidpoint( ccp(1, 0) ); //pro1->setReverseProgress(true); //反進度顯示 //扇形進度條pro2 CCSprite* bg2 = CCSprite::create("Icon.png"); CCProgressTimer* pro2 = CCProgressTimer::create(bg2); pro2->setPosition( ccp(350, 100) ); this->addChild(pro2); //扇形，圓心ccp(0.3 , 0.7) pro2->setType(kCCProgressTimerTypeRadial); pro2->setMidpoint( ccp(0.3, 0.7) ); //pro2->setReverseProgress(true); //逆時針// |
3、創建進度動作CCProgressTo、CCProgressFromTo
並讓pro1、pro2分別執行兩個進度動作。
|
1
2
3
4
5
6
7
8
|
// //進度動作 CCProgressTo* ac1 = CCProgressTo::create(2.0f, 100); CCProgressFromTo* ac2 = CCProgressFromTo::create(2.0f, 30, 100); pro1->runAction( CCRepeatForever::create(ac1) ); //2秒內，從0到100 pro2->runAction( CCRepeatForever::create(ac2) ); //2秒內，從30到100// |
4、運行結果
若添加反進度顯示setReverseProgress()
|
1
2
3
4
|
// pro1->setReverseProgress(true); //反進度顯示 pro2->setReverseProgress(true); //逆時針// |
結果如下：
5、分析與總結
更多進度條的顯示方式，請自行參悟。
