前言：
废话不多说，先看最终效果图
正文：
1、使用说明：
①引入头文件 “NumberScroller.h"
②用NumberScroller::create(int length,int fontSize) 函数来创建NumberScroller对象
③利用setNumber（int number）函数来设置计时器里面的值（这里只实现了向后滚动，即设置的值要大于等于当前值）
④利用getNumber获得当前计数器显示的值
⑤利用setTime（float time）函数来设置计时器滚动的速度，默认为1
2、实现思路：
①根据输入的长度length确定计时器的长度（即多少位）
②根据输入的fontSize确定字体大小
③创建length条并排放置的竖着的从01234567890（注意末尾有个零）
④根据设置的数字，不同的竖条移动相应的位置。
⑤利用遮罩层遮罩
3、源码解析：
对应思路①②
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();
Point points[] = {Point(getPosition()),Point(getPositionX(),getPositionY()+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
具体的初始化函数如下
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
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方法
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函数
void NumberColumn::update(float d){
if(m_cur_num != m_target_num){<span style="white-space:pre"> </span>//如果当前显示的数字不等于目标数字，即要开始滚动
float dis = update_speed*d;<span style="white-space:pre"> </span>//每次调用update函数需要滚动的距离等于update_speed 乘以 d （update_speed在setNumber函数中已经算出）
m_numbers->setPositionY(m_numbers->getPositionY() - dis);<span style="white-space:pre"> </span>//每次使整条向下移动dis距离
update_moveSum += dis;<span style="white-space:pre"> </span>//update_moveSum 用于保存现在到底移动了多少距离
if(update_moveSum >= m_fontSize){<span style="white-space:pre"> </span>//如果现在已经移动了一个字大小的距离
m_cur_num++;<span style="white-space:pre"> </span>//当前数字+1
m_numbers->setPositionY( - m_cur_num%10 * m_fontSize);<span style="white-space:pre"> </span>//标准对齐
update_moveSum = 0; <span style="white-space:pre"> </span>//重置
}
}
}
update函数便是实现滚动效果的核心，每一行都给了详细的注释
因为我们这里要实现的是类似于时钟的滚动效果（秒针转1圈时，分针转1/60圈），应用到计时器，个位滚动10次，十位才会转一下
所以对应每一条NumberColum，其对应的m_cur_num是不一样的。
例如999这个数 ，第一条（百位）对应的m_cur_num应该是9，第二条（十位）对应的m_cur_num应该是99，第三条（个位）对应的m_cur_num应该是999
由于setNumber时候计算了速度：
int delta = m_target_num - m_cur_num; update_speed = (delta * m_fontSize / m_time);
间隔越大，速度越快，因此保证了每条NumberColumn均会在m_time时间内完成滚动
有了上面的介绍，再回过头来再看一次NumberScroller的setNumber函数，是不是恍然大悟呢
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;
}
}
}完成效果后如下：
最后，添加遮罩层，只显示当前数字部分。
bool NumberScroller::init(int length,int fontSize){
。。。省略了一部分。。。
/*设置遮罩层*/
ClippingNode* cliper = ClippingNode::create();
DrawNode* drawNode = DrawNode::create();
Point points[] = {Point(getPosition()),1));
cliper->setStencil(drawNode);
cliper->addChild(m_visibleNode);
this->addChild(cliper);
}关于遮罩的基本知识，推荐一个很好的blog
http://www.jb51.cc/article/p-mftivbcg-wx.html
4、附上源码：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。