cocos2dx-3.10 c++ 版实现滚动数字效果实现

废话不多说,先上代码

#ifndef _NUMBERSCROLLER_H_
#define _NUMBERSCROLLER_H_

#include "cocos2d.h"
USING_NS_CC;

/*
这是一个数字滚动切换控件
更新方向:
1.在规定时间运动完,速度在变化
2.能指定字体表
3.增加新的更新算法,确保运动到指定数时候可以及时完成
4.添加能够指定宽和高以及数字之间的间隔
*/
class NumberColumn : public Node{
private:
NumberColumn();
public:
static NumberColumn* create(int fontHight);
void setNumber(int number,bool direction=true);
void setTime(float time);
private:
bool init(int fontHight);
void update(float delta);
private:
Node* m_numbers;        //当前显示节点
int m_cur_num;          //当前显示数字
int m_target_num;       //目标显示数组
int m_fontHight;        //当个字体高度

float m_time;           //切换总时间

float update_moveSum;  //几率在两个数字更新期间移动的距离
float update_speed;    //刷新一次的时间
};

class NumberScroller : public Node{
private:
NumberScroller();
public:
static NumberScroller* create(int length,int fontWidth,int fontHeight,int fontSpacing);
void setTime(float time);
void setNumber(int number);
int getNumber();
private:
bool init(int length, int fontWidth, int fontHeight, int fontSpacing);
private:
Vector<NumberColumn*> m_columns;    //存储一共的列数
int m_cur_num;                      //当前显示数字
int m_length;                       //列数
int m_time;                         //切换总时间
int m_fontWidth;                    //字体宽度
int m_fontHeight;                   //字体高度
int m_fontSpacing;                  //字体间隔
Node* m_visibleNode;                //当前可视节点
};
#endif

#include "NumberScroller.h"

NumberColumn::NumberColumn():
m_cur_num(0),
m_target_num(0),
m_time(1.0f),
update_moveSum(0),
update_speed(0)
{

}

NumberColumn* NumberColumn::create(int fontHight){
NumberColumn* ret = new NumberColumn();
if (ret && ret->init(fontHight)){
ret->autorelease();
return ret;
}
CC_SAFE_DELETE(ret);
return nullptr;
}

bool NumberColumn::init(int fontHight){
if(!Node::init())   return false;
m_numbers = Node::create();
this->addChild(m_numbers);
m_fontHight = fontHight;

this->scheduleUpdate();

//初始化一列0-9 共十个数字
for(int i=0;i<10;i++){
char str[2];
str[0] = i + '0';
str[1] = '\0';

auto temp = Label::createWithBMFont("fonts/test.fnt", str);
temp->setAnchorPoint(Point(0,0));
temp->setPosition(Point(0, i * fontHight));
m_numbers->addChild(temp);
}
//为了兼容不同方向的偏转
char str[2];
str[0]='0';
str[1]='\0';    //添加字符串结束符
Label* temp = Label::createWithBMFont("fonts/test.fnt", str);
temp->setAnchorPoint(Point(0,0));
temp->setPosition(Point(0, 10 * fontHight));
m_numbers->addChild(temp);

return true;
}
void NumberColumn::setNumber(int number,bool direction){
m_target_num = number;
int delta = m_target_num - m_cur_num;           //计算数字间隔
update_speed = (delta * m_fontHight / m_time);   //v = s / t
}

void NumberColumn::setTime(float time){
m_time = time;
}

void NumberColumn::update(float d){
if(m_cur_num != m_target_num){ //如果当前显示的数字不等于目标数字，即要开始滚动
float dis = update_speed * d; //每次调用update函数需要滚动的距离等于update_speed 乘以 d （update_speed在setNumber函数中已经算出）
m_numbers->setPositionY(m_numbers->getPositionY() - dis);//每次使整条向下移动dis距离
update_moveSum += dis;//update_moveSum 用于保存现在到底移动了多少距离
if (update_moveSum >= m_fontHight){ //如果现在已经移动了一个字大小的距离
//每移动一次累加1
m_cur_num++;
//对10求余是为了在每次达到10后从新开始新循环
m_numbers->setPositionY(- (m_cur_num % 10) * m_fontHight);  //负数表示向下移,标准对齐位置
update_moveSum = 0;
}
}
}

/*
********************************************************************************************************************************************
********************************************************************************************************************************************
*/

NumberScroller::NumberScroller():
m_cur_num(0),
m_length(0),
m_time(1.0f)
{

}

NumberScroller* NumberScroller::create(int length, int fontWidth, int fontHeight, int fontSpacing){
NumberScroller* ret = new NumberScroller();
if (ret && ret->init(length, fontWidth, fontHeight,fontSpacing)){
ret->autorelease();
return ret;
}
CC_SAFE_DELETE(ret);
return nullptr;
}

bool NumberScroller::init(int length, int fontWidth, int fontHeight, int fontSpacing){
if(!Node::init())   return false;
m_length = length;
m_fontWidth = fontWidth;
m_fontHeight = fontHeight;
m_fontSpacing = fontSpacing;
m_visibleNode = Node::create();

//排好length行数字
//该demo下为左对齐
for(int i=0;i<length;i++){
NumberColumn* column = NumberColumn::create(fontHeight);
m_columns.pushBack(column);
column->setAnchorPoint(Point(0,0));     //锚点设置为0是为了后面设置遮罩层
column->setPosition(i * (fontWidth + fontSpacing), 0);
column->setTime(m_time);        //设置默认运动时间1S
m_visibleNode->addChild(column);
}
/*设置遮罩层*/
ClippingNode* cliper = ClippingNode::create();
//创建模板
DrawNode* drawNode = DrawNode::create();
Point points[] = {
Point(getPosition()),
Point(getPositionX(),getPositionY() + m_fontHeight),
Point(getPositionX() + m_length * m_fontHeight, getPositionY() + m_fontHeight),
Point(getPositionX() + m_length * m_fontHeight, 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);
//不添加遮罩层的方法
//this->addChild(m_visibleNode);
}

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;
}
}
}

int NumberScroller::getNumber(){
return m_cur_num;
}

//对外开放设置时间的接口
void NumberScroller::setTime(float time){
m_time = time;
for(int i=0;i<m_length;i++){
m_columns.at(i)->setTime(time);
}
}

auto numberScroller = NumberScroller::create(1,15,33,10);//这个字体宽度根据fnt 文件表的相关参数计算
numberScroller->setPosition(Director::getInstance()->getVisibleSize().width / 2, Director::getInstance()->getVisibleSize().height / 2);

this->addChild(numberScroller);
scheduleUpdate();
Director::getInstance()->getScheduler()->schedule([=](float){
CountNum = CountNum + 1;
numberScroller->setNumber(CountNum);
}, this, 1.0f, false, "countDown");