Cocos2d-x 3.2编写常用UI组件（二）滚动计数器NumberScroller

前言：

废话不多说，先看最终效果图



正文：

1、使用说明：

① 引入头文件 “NumberScroller.h"

② 用NumberScroller::create(int length,int fontSize) 函数来创建NumberScroller对象

③ 利用setNumber（int number）函数来设置计时器里面的值（这里只实现了向后滚动，即设置的值要大于等于当前值）

④ 利用getNumber获得当前计数器显示的值

⑤ 利用setTime（float time）函数来设置计时器滚动的速度，默认为1

2、实现思路：

① 根据输入的长度length确定计时器的长度（即多少位）

② 根据输入的fontSize确定字体大小

③ 创建length条并排放置的竖着的从01234567890（注意末尾有个零）

④ 根据设置的数字，不同的竖条移动相应的位置。

⑤ 利用遮罩层遮罩

3、源码解析：

对应思路①②

先暂时不用看设置遮罩层部分，前面只是保存长度和字体大小到成员变量中，下面的一个for循环就是用来排好length列数字的。

其中这里出现了一个NumberColumn类，表示一列数字01234567890。

具体的初始化函数如下

NumberColumn的init函数里面，除了保存长度和字体大小和启动update外，接下来就是构造一个01234567890的竖列。

注意，我们这里把所有Label都放在一个Node里面，这样可使我们更方便的操作.

最后，回到NumberScroller 初始化完的效果是这样子（无遮罩）的：



NumberScroller最重要的函数还是setNumber

可以看出都是间接地调用NumberColumn的setNumber方法

奇怪啦，NumberColumn也只是简单的把传来的number保存到m_target_num里面，还有计算滚动的速度 也没有实现滚动的动作啊。

奥秘在于NumberColumn启动的update函数

update函数便是实现滚动效果的核心，每一行都给了详细的注释。

因为我们这里要实现的是类似于时钟的滚动效果（秒针转1圈时，分针转1/60圈），应用到计时器，个位滚动10次，十位才会转一下，所以对应每一条NumberColum，其对应的m_cur_num是不一样的。

例如999这个数 ，第一条（百位）对应的m_cur_num应该是9，第二条（十位）对应的m_cur_num应该是99，第三条（个位）对应的m_cur_num应该是999。

由于setNumber时候计算了速度：

间隔越大，速度越快，因此保证了每条NumberColumn均会在m_time时间内完成滚动。

有了上面的介绍，再回过头来再看一次NumberScroller的setNumber函数，是不是恍然大悟呢：

完成效果后如下：



最后，添加遮罩层，只显示当前数字部分。

关于遮罩的基本知识，推荐《【Cocos2d-x 3.2】裁剪节点（ClippingNode）总结》

4、附上源码：滚动计数器NumberScroller