cocos2d-js 数字自动滚动效果

Posted 2022-12-13 振长策而御宇内

实现方式一：
从数字1滚动到数字2，并显示增加减少数量

rollFightNum: function(num1, num2) 
    if (!this._powerLabelClone) 
        this._powerLabelClone = this._powerLabel.clone();
        this._powerBg.addChild(this._powerLabelClone);
    
    
    if (this._powerLabelClone.isVisible()) 
        this.unschedule(this.rollFightNumAction);
    
    
    this.roll_num1 = num1;
    this.roll_num2 = num2;
    this.roll_gap = num2 - num1;
    
    this._powerLabelClone.setVisible(true);
    this._powerLabelClone.setString(num1);
    this._powerLabel.setVisible(false);
    
    this.schedule(this.rollFightNumAction, 0.02);
,

rollFightNumAction: function(dt) 
    this.roll_num1 += this.roll_gap*dt/0.4;
    
    if ((this.roll_gap > 0 && this.roll_num1 >= this.roll_num2) || (this.roll_gap < 0 && this.roll_num1 <= this.roll_num2)) 
        this.unschedule(this.rollFightNumAction);
        this._powerLabelClone.setVisible(false);
        this._powerLabel.setVisible(true);
        
        var label_end = this._powerLabel.clone();
        label_end.setString(this.roll_gap < 0 ? this.roll_gap : ("+"+this.roll_gap));
        label_end.setPosition(cc.p(label_end.getPositionX(), label_end.getPositionY()-20));
        this._powerBg.addChild(label_end);
        label_end.runAction(cc.Sequence.create(cc.Spawn.create(cc.FadeOut.create(0.4),cc.MoveBy.create(0.4,cc.p(0,20))),cc.CallFunc.create(function(sender)sender.removeFromParent();)));
    
    
    this._powerLabelClone.setString(Math.floor(this.roll_num1));
,

实现方式二：
固定时间从数字1滚动到数字2

autoRollNumber: function (start, end) 
    var bEnable = start !== end;
    this._autoRolling = bEnable;
    this._autoRollTick = 0;
    this._autoStarNum = start;
    this._autoNumSpacing = end - start;

    this.unschedule(this._autoRoll);
    this.updateItemNum(start);
    if (bEnable) 
        this.schedule(this._autoRoll);
    
,

_autoRoll: function (dt) 
    var totalTime = ItemNumAutoRollTotalTime;
    this._autoRollTick += dt;
    if (this._autoRollTick >= totalTime) 
        this._autoRollTick = totalTime;
        this._autoRolling = false;
        this.unschedule(this._autoRoll);
    
    this.updateItemNum(parseInt(this._autoRollTick * this._autoNumSpacing / totalTime) + this._autoStarNum);
,