cocos2dx-3.10 c++ 版实现滚动数字效果实现
废话不多说,先上代码
NumberScroller.h
#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 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 NumberScroller.cpp
#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;isetAnchorPoint(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;i1)->setNumber(number);
number /= 10;
}
}
}
int NumberScroller::getNumber(){
return m_cur_num;
}
//对外开放设置时间的接口
void NumberScroller::setTime(float time){
m_time = time;
for(int i=0;isetTime(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");实现效果
