Cocos2dx3.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、源码解析：

对应思路①②

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()+m_fontSize),Point(getPositionX()+m_length*m_fontSize,getPositionY())};
	drawNode->drawPolygon(points,4,Color4F(0,0,0,1),0,Color4F(0,0,0,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()),Point(getPositionX(),getPositionY()+m_fontSize),
		Point(getPositionX()+m_length*m_fontSize,getPositionY()+m_fontSize),Point(getPositionX()+m_length*m_fontSize,getPositionY())};
	drawNode->drawPolygon(points,4,Color4F(0,0,0,1),0,Color4F(0,0,0,1));

	cliper->setStencil(drawNode);
	cliper->addChild(m_visibleNode);
	this->addChild(cliper);
}

关于遮罩的基本知识，推荐一个很好的blog

http://shahdza.blog.51cto.com/2410787/1561937

4、附上源码：

点击打开链接