cocos2dx基础篇(23)——进度条CCProgressTimer - 夏天的风 - 51CTO技术博客

【唠叨】

哎，周围的同学都在搞cocos2dx 3.X了，而我还在用2.2.3。没办法，网上3.X的教程毕竟很少，还是等我的同学学得差不多了，我再换成3.X跟着同学搞，哪里不会问哪里。

本节主要来讲讲进度条CCProgresstimer，相信大家也不会陌生的吧。如安装软件时显示的进度、游戏中人物的HP、MP显示的百分比横条。

【致谢】

http://gl.paea.cn/contents/2260d48c5e2bc83d.html

【Demo下载】

https://github.com/shahdza/Cocos_LearningTest/tree/master/demo_%E8%BF%9B%E5%BA%A6%E6%9D%A1CCProgressTimer

【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% 。

使用方法如下：

4

5

6

7

//几秒内从0%变化到指定进度

CCProgressto::create( '时间' , '变化到百分之几' );

//几秒内从a%进度变化到b%进度

CCProgressFromTo::create( '从百分之几' );

2、CCProgresstimer

CCProgresstimer就是拿一张CCSprite精灵图片来作为进度条，然后根据一个百分比属性，实现显示/隐藏图片的一部分区域，达到图形化显示进度的作用。

进度条有两种样式：扇形进度条、条形进度条。默认锚点（0.5,0.5）。

常用操作如下：

（1）创建方法

（2）设置精灵图片、设置进度值、设置样式

（3）设置开始的中心位置，设置用于做进度条的比例（这两个比较抽象，需要单独讲解）

其中，有两个函数比较抽象：setMidpoint、setBarChangeRate。由于语言组织能力太弱，所以后面我会用图片来说明一下。

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

@H_404_288@ 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);

@H_498_404@