cocos2dx-3.10 C++实现滚动数字

本文实例为大家分享了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<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

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;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");

实现效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Cocos2dx实现数字跳动效果

    本文实例为大家分享了Cocos2dx实现数字跳动效果的具体代码,供大家参考,具体内容如下 封装的类如下: .h文件 class DigitalBeatText:public cocos2d::Node { public: DigitalBeatText(); ~DigitalBeatText(); static DigitalBeatText *create(int value); void setValue(int newValue); protected: bool init(int val

  • cocos2dx-3.10 C++实现滚动数字

    本文实例为大家分享了cocos2dx-3.10 C++实现滚动数字的具体代码,供大家参考,具体内容如下 NumberScroller.h #ifndef _NUMBERSCROLLER_H_ #define _NUMBERSCROLLER_H_ #include "cocos2d.h" USING_NS_CC; /* 这是一个数字滚动切换控件 更新方向: 1.在规定时间运动完,速度在变化 2.能指定字体表 3.增加新的更新算法,确保运动到指定数时候可以及时完成 4.添加能够指定宽和高以

  • JS+CSS实现滚动数字时钟效果

    本篇内容我们用js配合css样式表来实现一个滚动时钟的动画效果,这个效果一般都是用在网页开场动画以及区域的时间显示中,非常好看,动画效果也很个性,我们先来看下运行后的效果: 下面就是这个滚动时钟动画的全部代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

  • 匹配5到10位无重复数字的正则表达式

    对于有重复的5到10位数字可以使用\d{5,10} 这样的正则 无重复的5到10位数字我考虑了一下还不会,最然只好查网上. 有一个版本还不错,反正RegexBuddy测试通过了. 复制代码 代码如下: ^(?!\d*?(\d)\d*?\1)\d{5,10}$ 对于(?!---(--)---\1)这样的形式我还没有研究透,有时间我真要细细研究. 上一个php的例子: 复制代码 代码如下: <?php $str = '123456789'; $search = '/^(?!\d*?(\d)\d*?\

  • Vue.js实现大屏数字滚动翻转效果

    大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最终实现的效果: 整体思路: 在实现此效果之前,我们先来捋一下思路,用思维导图来设计一下我们的实现步骤,如下: 你可以审查元素,下载数字背景图片,复制图片地址,或者使用其他背景图片.背景颜色 有了以上的设计流程,我们先来简单实现一下: // CSS代码 <style> .box-item { position: relative; display: inline-

  • jquery+php实现滚动的数字特效

    有时我们需要动态的展示访问次数.下载次数等效果,我们可以借助jQuery结合后台php实现一个滚动的数字展示效果. 本文以实时获取某产品的下载次数为场景,前台定时执行javascript获取最新的下载次数,并滚动更新页面上的下载次数. HTML 我们首先载入jQuery库文件和动画背景插件:animateBackground-plugin.js. <script type="text/javascript" src="js/jquery.js"><

  • Jquery数字上下滚动动态切换插件

    Jq打造的数字滚动插件,数字变化时,动态滚动切换,效果非常好. 我们先来看示例: CSS .textC { position:absolute; width:500px; overflow:hidden; margin-top: 100px; line-height:30px; margin-left: 300px; height:30px; } .textC span { color: #13BEEC; font-size: 28px; font-weight: bold; font-fami

  • Flutter实现滚动选择数字

    本文实例为大家分享了Flutter实现滚动选择数字的具体代码,供大家参考,具体内容如下 前言 本来想百度查的,结果没查到,只有自己写,顺便记录一下,加深印象 页面需求要用户输入页码,之前选择的是使用TextField.后来觉得用showDialog弹出选项,让用户自己选择.类似这样的: 确定了样式就开始写吧.关于Dialog的选择,我用的是SimpleDialog,有对细节上有要求的可以自己自定义一个. showDialog(                 context: context,

  • Vue transition组件简单实现数字滚动

    目录 实现效果 Scrip 布局 动画 逻辑控制 总结 实现效果 Scrip <template> <button @click="addCount">点我滚动数字</button> <div class="roll-container"> <transition name="roll"> <div class="roll-number" :key="

  • iOS使用UICollectionView实现横向滚动照片效果

    本文实例为大家分享了iOS使用UICollectionView实现横向滚动展示照片的具体代码,供大家参考,具体内容如下 这是Demo链接 效果图 思路 1. 界面搭建 界面的搭建十分简单,采用UICollectionView和自定义cell进行搭建即可. // ViewController.m // 下面使用到的宏和全局变量 #define ScreenW [UIScreen mainScreen].bounds.size.width #define ScreenH [UIScreen main

  • vue实现数字动态翻牌的效果(开箱即用)

    实现效果图 原理 将1~9的数字竖直排版,通过translate移动位置显示不同数字,使用transition控制transform属性有动画效果 技术点 css 属性 writing-mode: vertical-lr,使数字竖直排版 移动  transform: translate(-50%, -40%); y值控制移动至哪个数字 transition  控制transform属性有动画效果 实现代码(注释比较详细,不再赘述) <!-- * @Author: mat * @Date: 201

随机推荐