前言：
废话不多说，先看最终效果图
正文：
1、使用说明：
① 引入头文件 “NumberScroller.h"
② 用NumberScroller::create(int length,int fontSize) 函数来创建NumberScroller对象
③ 利用setNumber（int number）函数来设置计时器里面的值（这里只实现了向后滚动，即设置的值要大于等于当前值）
④ 利用getNumber获得当前计数器显示的值
⑤ 利用setTime（float time）函数来设置计时器滚动的速度，默认为1
2、实现思路：
① 根据输入的长度length确定计时器的长度（即多少位）
② 根据输入的fontSize确定字体大小
③ 创建length条并排放置的竖着的从01234567890（注意末尾有个零）
④ 根据设置的数字，不同的竖条移动相应的位置。
⑤ 利用遮罩层遮罩
3、源码解析：
对应思路①②
|
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
|
bool
NumberScroller::init(
int
length,
int
fontSize){
if
(!Node::init())
return
false
;
m_length=length;
m_fontSize=fontSize;
m_visibleNode=Node::create();
//排好length列数字
for
(
int
i=0;i<length;i++){
NumberColumn*column=NumberColumn::create(fontSize);
m_columns.pushBack(column);
column->setAnchorPoint(Point(0,0));
column->setPosition(i*fontSize,0);
column->setTime(m_time);
m_visibleNode->addChild(column);
}
/*设置遮罩层*/
ClippingNode*cliper=ClippingNode::create();
DrawNode*drawNode=DrawNode::create();
Pointpoints[]={Point(getPosition()),Point(getPositionX(),getPositionY()+m_fontSize),
Point(getPositionX()+m_length*m_fontSize,Point(getPositionX()+m_length*m_fontSize,getPositionY())};
drawNode->drawPolygon(points,4,Color4F(0,1),1));
cliper->setStencil(drawNode);
cliper->addChild(m_visibleNode);
this
->addChild(cliper);
}
|
先暂时不用看设置遮罩层部分，前面只是保存长度和字体大小到成员变量中，下面的一个for循环就是用来排好length列数字的。
其中这里出现了一个NumberColumn类，表示一列数字01234567890。
具体的初始化函数如下
|
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
|
bool
NumberColumn::init(
int
fontSize){
if
(!Node::init())
return
false
;
m_numbers=Node::create();
this
->addChild(m_numbers);
m_fontSize=fontSize;
this
->scheduleUpdate();
for
(
int
i=0;i<10;i++){
char
str[2];
str[0]=i+
'0'
;
str[1]=
'\0'
;
Label*temp=Label::create(str,
""
,fontSize);
temp->setAnchorPoint(Point(0,0));
temp->setPosition(Point(0,i*fontSize));
m_numbers->addChild(temp);
}
char
str[2];
str[0]=
'0'
;
str[1]=
'\0'
;
Label*temp=Label::create(str,fontSize);
temp->setAnchorPoint(Point(0,0));
temp->setPosition(Point(0,10*fontSize));
m_numbers->addChild(temp);
return
true
;
}
|
NumberColumn的init函数里面，除了保存长度和字体大小和启动update外，接下来就是构造一个01234567890的竖列。
注意，我们这里把所有Label都放在一个Node里面，这样可使我们更方便的操作.
最后，回到NumberScroller 初始化完的效果是这样子（无遮罩）的：
NumberScroller最重要的函数还是setNumber
|
1
2
3
4
5
6
7
8
9
10
|
void
NumberScroller::setNumber(
int
number){
if
(number>m_cur_num){
m_cur_num=number;
for
(
int
i=0;i<m_length;i++){
m_columns.at(m_length-i-1)->setNumber(number);
number/=10;
}
}
}
|
可以看出都是间接地调用NumberColumn的setNumber方法
|
1
2
3
4
5
|
void
NumberColumn::setNumber(
int
number,
bool
direction){
m_target_num=number;
int
delta=m_target_num-m_cur_num;
update_speed=(delta*m_fontSize/m_time);
}
|
奇怪啦，NumberColumn也只是简单的把传来的number保存到m_target_num里面，还有计算滚动的速度 也没有实现滚动的动作啊。
奥秘在于NumberColumn启动的update函数
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
void
NumberColumn::update(
float
d){
if
(m_cur_num!=m_target_num){
//如果当前显示的数字不等于目标数字，即要开始滚动
m_numbers->setPositionY(m_numbers->getPositionY()-dis);
//每次使整条向下移动dis距离
update_moveSum+=dis;
//update_moveSum用于保存现在到底移动了多少距离
if
(update_moveSum>=m_fontSize){
//如果现在已经移动了一个字大小的距离
m_cur_num++;
//当前数字+1
m_numbers->setPositionY(-m_cur_num*m_fontSize);
//标准对齐
update_moveSum=0;
//重置
}
}
}
|
update函数便是实现滚动效果的核心，每一行都给了详细的注释。
因为我们这里要实现的是类似于时钟的滚动效果（秒针转1圈时，分针转1/60圈），应用到计时器，个位滚动10次，十位才会转一下，所以对应每一条NumberColum，其对应的m_cur_num是不一样的。
例如999这个数 ，第一条（百位）对应的m_cur_num应该是9，第二条（十位）对应的m_cur_num应该是99，第三条（个位）对应的m_cur_num应该是999。
由于setNumber时候计算了速度：
|
1
2
|
int
delta=m_target_num-m_cur_num;
update_speed=(delta*m_fontSize/m_time);
|
间隔越大，速度越快，因此保证了每条NumberColumn均会在m_time时间内完成滚动。
有了上面的介绍，再回过头来再看一次NumberScroller的setNumber函数，是不是恍然大悟呢：
|
1
2
3
4
5
6
7
8
9
10
|
void
NumberScroller::setNumber(
int
number){
if
(number>m_cur_num){
m_cur_num=number;
for
(
int
i=0;i<m_length;i++){
m_columns.at(m_length-i-1)->setNumber(number);
number/=10;
}
}
}
|
完成效果后如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
bool
NumberScroller::init(
int
length,
int
fontSize){
。。。省略了一部分。。。
/*设置遮罩层*/
ClippingNode*cliper=ClippingNode::create();
DrawNode*drawNode=DrawNode::create();
Pointpoints[]={Point(getPosition()),
Point(getPositionX()+m_length*m_fontSize,getPositionY())};
drawNode->drawPolygon(points,1));
cliper->setStencil(drawNode);
cliper->addChild(m_visibleNode);
this
->addChild(cliper);
}
|
关于遮罩的基本知识，推荐《【Cocos2d-x 3.2】裁剪节点（ClippingNode）总结》
4、附上源码：滚动计数器NumberScroller
