Cocos2dx实现数字跳动效果

本文实例为大家分享了Cocos2dx实现数字跳动效果的具体代码,供大家参考,具体内容如下

封装的类如下:

.h文件

class DigitalBeatText:public cocos2d::Node
{
public:
 DigitalBeatText();
 ~DigitalBeatText();
 static DigitalBeatText *create(int value);

 void setValue(int newValue);
protected:
 bool init(int value);

 void setValueNoAction(int newValue);
 void startRoll();
 void stopRoll();

 void onTimeHandler(float dt);
protected:
 cocos2d::ui::Text * m_txt;
 int  m_lastValue;
 int  m_newValue;
 int  m_valueGap;  //数字跳动间隔
 float    m_scheduleInterval;//调度器间隔
 bool    m_isReverse;  // true: 从大到小
};

.cpp文件:

DigitalBeatText::DigitalBeatText()
:m_txt(nullptr)
, m_lastValue(0)
, m_newValue(0)
, m_valueGap(0)
, m_scheduleInterval(1.0f/60.f)
, m_isReverse(false)
{

}

DigitalBeatText::~DigitalBeatText()
{
}

DigitalBeatText* DigitalBeatText::create(int value)
{
 auto pRet = new DigitalBeatText;
 if (pRet->init(value))
 {
  pRet->autorelease();
  return pRet;
 }
 CC_SAFE_DELETE(pRet);
 return nullptr;
}

bool DigitalBeatText::init(int value)
{
 if (!Node::init()){
  return false;
 }
 char buff[16] = { 0 };
 m_txt = ui::Text::create();
 m_txt->setFontSize(36);
 sprintf(buff, "%d", value);
 m_txt->setString(buff);
 this->addChild(m_txt);
 return true;
}

void DigitalBeatText::setValue(int newValue)
{
 m_isReverse = newValue < m_lastValue;
 stopRoll();
 m_newValue = newValue;
 startRoll();
}

void DigitalBeatText::setValueNoAction(int newValue)
{
 m_lastValue = newValue;
 m_newValue = newValue;
 m_txt->setString(cocos2d::StringUtils::toString(m_lastValue));
}

void DigitalBeatText::startRoll()
{
 int count = m_newValue - m_lastValue;
 if (count>0){
  m_valueGap = ceil(count / (1.0 / m_scheduleInterval));
 }else{
  m_valueGap = floor(count / (1.0 / m_scheduleInterval));
 }
 schedule(CC_SCHEDULE_SELECTOR(DigitalBeatText::onTimeHandler), m_scheduleInterval);
}

void DigitalBeatText::stopRoll()
{
 unschedule(CC_SCHEDULE_SELECTOR(DigitalBeatText::onTimeHandler));
}

void DigitalBeatText::onTimeHandler(float dt)
{
 m_lastValue += m_valueGap;
 bool stop = false;
 if (!m_isReverse)
 {
  if (m_lastValue >= m_newValue){
   m_lastValue = m_newValue;
   stop = true;
  }
 }
 else{
  if (m_lastValue <= m_newValue){
   m_lastValue = m_newValue;
   stop = true;
  }
 }
 m_txt->setString(cocos2d::StringUtils::toString(m_lastValue));
 if (stop){
  this->stopRoll();
 }
}

使用示例:

m_index = 1;
m_beatT = DigitalBeatText::create(m_index);
m_beatT->setPosition(visibleSize*0.5);
 this->addChild(m_beatT);

m_index += RandomHelper::random_int(0, 100) - 50;
m_beatT->setValue(m_index);

效果如图:

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

(0)

相关推荐

  • 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.添加能够指定宽和高以

  • 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

  • Android实现数字跳动效果的TextView方法示例

    前言 本文介绍的是Android如何实现数字跳动效果的TextView,主要运用了DancingNumberView,DancingNumberView是一个用于跳动显示文本中数字的控件,继承自TextView,这种控件一般用于显示金额等对用户较为敏感的数字,让UI交互更加生动. 它具有以下几点特性: 自动获取文本中的所有数字,并同时开始跳动,免去多个TextView拼接的麻烦 支持数字按照自定义的格式显示,例如限定只显示小数点后两位 效果图如下 导入使用 Gradle 第1步,在project

  • JavaScript 抽奖效果实现代码 数字跳动版

    JavaScript实现的抽奖效果 数字跳动版 .a1 {}{ position: relative; font-family: Verdana; font-size: 200px; color: #888888; } function Lottery() { var Nos = Math.round(Math.random() * (4999 - 1) + 1); var result = document.getElementById("layer1"); if (result !

  • Android 仿余额宝数字跳动动画效果完整代码

    一:想都不用想的,有图有真相,看着爽了,在看下面源码 二:实例源码分析 ①:首先定义接口 package com.demo.tools.view; /** * 数字动画自定义 * * @author zengtao 2015年7月17日 上午11:48:27 * */ public interface RiseNumberBase { public void start(); public RiseNumberTextView withNumber(float number); public R

  • js实现数字跳动到指定数字

    本文实例为大家分享了js实现数字跳动到指定数字的具体代码,供大家参考,具体内容如下 运行结果如下: <!DOCTYPE html> <head> <title>js实现数字跳动到指定数字</title> <style> h1 {font-size: 150px;text-align:center;} p {text-align:center;} button {font-size:40px;} </style> </head&g

  • js实现简单数字变动效果

    本文实例为大家分享了js实现数字变动效果展示的具体代码,供大家参考,具体内容如下 $.fn.countTo = function (options) { options = options || {};//当options未被初始化,即typeof options = 'undefined'时,执行后面部分即var options = {}来初始化一个对象 return $(this).each(function () { // set options for current element v

  • JS实现的网页倒计时数字时钟效果

    本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q

  • 使用JS显示倒计时数字时钟效果

    本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • Android仿支付宝中余额宝的数字动画效果

    实现效果图: 下面是具体代码,可直接复制: package com.lcw.rabbit.widget; import android.animation.ObjectAnimator; import android.content.Context; import android.text.TextUtils; import android.util.AttributeSet; import android.view.animation.AccelerateDecelerateInterpola

  • JS 实现倒计时数字时钟效果【附实例代码】

    这篇文章主要介绍了JS实现的网页倒计时数字时钟效果,是一款非常实用的javascript倒计时特效,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&

随机推荐